Wie zu zwingen, eine Feste Spaltenbreite mit einem Bootstrap-grid und halten Sie die andere Flüssigkeit

Ich benutze Bootstrap, und ich möchte das grid-layout angezeigt, auf dem folgenden Bild.

Ich würde gerne eine sidebar mit einer festen mit der 330px, egal welche Display-Größen und halten alles in #page-content wieder ansehnliche je nach Auflösung meines Besuchers Bildschirm. Wie zu zwingen, eine Feste Spaltenbreite mit einem Bootstrap-grid und halten Sie die andere Flüssigkeit

Wie kann ich erreichen, das layout auf dem Bild gezeigt? Wenn ich den folgenden Code:

<div class="col-md-10" id="page-content">
   <div class="col-md-2">...</div>
   <div class="col-md-10">...</div>
</div>
<div class="col-md-2" id="sidebar">
   ...
</div>

und versuchen zu beheben die Breite der #sidebar mit width="330px"; für kleinere Bildschirmgrößen, wird der Inhalt nach rechts verschoben, wo Sie nicht gesehen werden können. Da Bootstrap weist width: 16.66666667%; zu .col-md-2, wie es scheint, ich hätte, um loszuwerden, das grid-system für die höheren divs #page-content und #sidebar. Aber dann, wie kann ich sicherstellen, dass #page-content füllt den verbleibenden Platz auf der linken Seite des #sidebar.

Ich habe es geschafft, eine Sperre in die Breite einer Spalte durch setzen der beiden min-width und max-width auf denselben Wert. Funktioniert wie ein Charme. Mit Boostrap 4.

InformationsquelleAutor LaGuille | 2017-01-28

  1. 8

    Bootstrap grid gemeint waren, fluid, so sollen Sie zu ändern, wie ändert sich der Bildschirm-Größe.

    Für Ihre gewünschte layout, Sie können machen es möglich mit display: flex oder display:table statt. Ich werde gehen mit display:table für mein Beispiel, da gibt es mehr Unterstützung als die flexbox.

    Werden Sie brauchen, um Ihre HTML, so etwas wie:

    <div class="page">
  <div class="page-content">
    <div class="row">
      <div class="col-md-2">
        <div class="blue">test</div>
      </div>
      <div class="col-md-10">
        <div class="green">test</div>
      </div>
    </div>
  </div>
  <div class="sidebar">
    <div class="gold">test</div>
  </div>
</div>

    Und hier ist die CSS, die ich verwendet habe:

    .page {
  display: table;
  width: 100%;
}
.page-content,
.sidebar {
  display: table-cell;
}
.sidebar {
  width: 330px;
}
.blue,
.green,
.gold {
  height: 50px;
}

.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.gold {
  background-color: gold;
}

    Können Sie Kasse der Geige hier: https://jsfiddle.net/m0nk3y/qjutpze4/

    InformationsquelleAutor Gene Parcellano

  2. 17

    Bootstrap 4.0 beta:

    HTML:

    <div class="container-fluid">
  <div class="row">
    <div class="col my-sidebar">
      <h2>LEFT</h2>
      <h6>(FIXED 230px COLUMN)</h6>
    </div>
    <div class="col text-center">
      <h1>CENTER (FLUID COLUMN)</h1>
    </div>
    <div class="col my-sidebar">
      <h2>RIGHT</h2>
      <h6>(FIXED 230px COLUMN)</h6>
    </div>
  </div>
</div>

    CSS:

    .my-sidebar {
    -ms-flex: 0 0 230px;
    flex: 0 0 230px;
    background-color: greenyellow; 
} 

@media (max-width: 690px) {
  .my-sidebar {
    display: none; 
  } 
}

    Live-Beispiel hier: https://www.codeply.com/view/PHYTWFDFRU

    In diesem Beispiel werden die fixierten Spalten verschwinden, wenn der browser-Fenster-Breite wird weniger als 690px. Wenn Sie wollen, dass Sie immer sichtbar ist, entfernen Sie die zweite css-block mit @media ganz.

    funktioniert, danke !
    erstaunlich, ich Liebe es!

    InformationsquelleAutor Sergey

Schreibe einen Kommentar