Bootstrap 3.0 - Fluid Grid mit festen Spaltengrößen

Ich lerne, wie man Bootstrap benutzt. Derzeit watete ich mich durch Layouts. Während Bootstrap ziemlich cool ist, scheint alles, was ich sehe, veraltet zu sein. Für mein Leben habe ich ein grundlegendes Layout, das ich nicht herausfinden kann. Mein Layout sieht folgendermaßen aus:

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

Dieses Raster muss die volle Höhe des Fensters einnehmen. Nach meinem Verständnis muss ich feste und flüssige Breiten mischen. Bootstrap 3.0 scheint jedoch nicht mehr über die Fluidklasse zu verfügen. Selbst wenn es so wäre, könnte ich nicht herausfinden, wie man flüssige und feste Säulengrößen mischt. Weiß jemand, wie man das in Bootstrap 3.0 macht?

Es gibt wirklich keine einfache Möglichkeit, flüssige und feste Breiten mit Bootstrap 3 zu mischen. Es soll so sein, da das Rastersystem so konzipiert ist, dass es flüssig und reaktionsschnell ist. Sie könnten versuchen, etwas zu hacken, aber es würde dem widersprechen, was das Responsive Grid-System versucht, mit dem Ziel, dieses Layout über verschiedene Gerätetypen hinweg fließen zu lassen.

Wenn Sie sich an dieses Layout halten müssen, würde ich in Betracht ziehen, Ihre Seite mit benutzerdefiniertem CSS zu gestalten und das Raster nicht zu verwenden.

Bearbeiten: Da viele Leute dies zu tun scheinen, habe ich hier eine kurze Anleitung mit einem allgemeineren Anwendungsfall geschrieben: https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Ich hoffe es hilft.

Das Bootstrap3-Rastersystem unterstützt das Verschachteln von Zeilen, sodass Sie die Stammzeile anpassen können, um Seitenmenüs mit fester Breite zuzulassen.

Sie müssen einen Abstand links in die Stammzeile einfügen und dann eine untergeordnete Zeile haben, die Ihre normalen Rasterlayoutelemente enthält.

So mache ich das normalerweise: http://jsfiddle.net/u9gjjebj/

html

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

CSS

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

oder verwenden Sie die Anzeigeeigenschaft mit Tabellenzelle;

CSS

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

html

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

Ich hatte ein etwas anderes Problem:

• Ich musste feste und flüssige Spalten als Teil einer Tabelle und nicht als Teil eines Vollfenster-Layouts kombinieren
• Ich musste Spalten sowohl links als auch rechts befestigen
• Ich war nicht besorgt über die Spaltenhintergründe bei voller Höhe der enthaltenen Zeile

Infolgedessen habe ich auf floatdie linke und rechte Spalte zurückgegriffen und konnte dann Bootstraps verwenden row, um die Flüssigkeitsspalten dazwischen zu erstellen .

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

Aktualisiert 2018

IMO, der beste Weg, dies in Bootstrap 3 zu erreichen, wäre die Verwendung von Medienabfragen, die an den Haltepunkten von Bootstrap ausgerichtet sind, sodass Sie nur die Spalten mit fester Breite als größere Bildschirme verwenden und das Layout dann auf kleineren Bildschirmen reagieren lassen. Auf diese Weise behalten Sie die Reaktionsfähigkeit ...

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Working Bootstrap Fixed-Fluid Demo

Bootstrap 4 verfügt über eine Flexbox, sodass Layouts wie dieses viel einfacher sind: http://www.codeply.com/go/eAYKvDkiGw

OK, meine Antwort ist super nett:

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

jsfiddle Spielplatz

Wenn Sie alle Browser unterstützen möchten, verwenden Sie https://github.com/10up/flexibility

UPDATE 2014-11-14: Die folgende Lösung ist zu alt. Ich empfehle die Verwendung der Flexbox-Layoutmethode. Hier ist eine Übersicht: http://learnlayout.com/flexbox.html

Meine Lösung

html

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

scss

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

Ohne zu viel Bootstrap-Layout-Code zu ändern.

Update (nicht von OP): Hinzufügen eines Code-Snippets unten, um das Verständnis dieser Antwort zu erleichtern. Aber es scheint nicht wie erwartet zu funktionieren.

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}

<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

Warum setzen Sie nicht einfach die linken beiden Spalten auf einen festen Wert in Ihrem eigenen CSS und erstellen dann ein neues Rasterlayout der vollständigen 12 Spalten für den Rest des Inhalts?

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>