Bootstrap 3.0 - Fluid Grid mit festen Spaltengrößen

126

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?

Node Newbie
quelle
Untersuchen Sie die Verwendung von Tabellen neben Zeilen und Spalten.
Kalu
Hier ist ein Beispiel mit fester Flüssigkeit für Bootstrap 3: codeply.com/go/GN4QinVrjI
Zim

Antworten:

32

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.

Steve K.
quelle
5
Ich denke, so etwas muss warten, bis Flexbox die volle Unterstützung hat, aber es ist immer noch sehr lahm. Das Bootstrap-Modell eignet sich hervorragend, wenn die Anzahl der Spalten statisch ist. Wenn Sie jedoch beispielsweise Spalten dynamisch ausblenden und anzeigen können, ist es viel sinnvoller, wenn mindestens eine Spalte flüssig ist.
Nate Bundy
1
Bitte bearbeiten Sie Ihre Antwort, um einen Verweis auf diesen Link in die Lösung aufzunehmen. Grüße: stackoverflow.com/questions/8740779/…
Morty
151

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;
}
Dean North
quelle
Dieser ist nett, aber wenn Sie ihn in die feste Spalte einfügen, z. B. diese <p> <a class="btn btn-default" href="#" role="button"> Details anzeigen & raquo; </a> </ p> oder Bootstrap Dropdown dann funktionieren diese nicht in der festen Spalte. Gibt es eine Lösung dafür?
Vaclav Elias
@VaclavElias versuchen, ein Diff in voller Größe mit der Position: relative und dann das Dropdown-Menü einzufügen? Es hilft, wenn Sie eine jsfiddle machen, um das Problem zu zeigen
w00t
Ich muss noch sehen, wie das in allen Browsern funktioniert, aber ansonsten gute Arbeit, gut gemacht.
Phil Cooper
Gibt es eine Möglichkeit, dies mit den festen Spalten auf der rechten Seite zu tun?
Sean
3
position: fixedbedeutet, dass beim Scrollen der Inhalt dieser Spalte über dem Rest der Seite schwebt. In meinem Fall habe ich es mit behoben position: absolute.
Laurent
26

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/

Frankey
quelle
1
Das Problem ist, wenn Sie ex verwenden. `.visible-xs , becouse display: table-cell` wird display:block...
Dariusz Filipiak
21

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>
Paddy Mann
quelle
4
@Schemetrical Ich hatte keine Frage. Ich erklärte, dass ich ein etwas anderes Problem hatte, und fügte die Lösung hinzu, mit der ich anderen Menschen helfen wollte, die von Google hierher kamen.
Paddy Mann
1
Ihre Antwort ist von unschätzbarem Wert. Ganz einfach und doch mein Problem zu lösen. Vielen Dank.
Charles
Warum können Sie dem Zeilendiv nicht die Ränder geben, die das enthaltende Div in Ihrer Antwort hat?
GreenAsJade
Diese Antwort ist ernsthaft legitim. Wenn Sie Bootstrap-Spalten verwenden müssen, aber nicht möchten, dass sie bei bestimmten Bildschirmbreiten kollabieren, ist dies das, was Sie benötigen (verwenden Sie beispielsweise Pull-Left / Pull-Right anstelle von Col-MD-3).
Sam
Dies scheint eine gute Antwort zu sein. Ich habe einige Probleme mit meinem marginund paddingin meiner Reihe in der Mitte, aber das sollte ein lösbares Problem sein. Was sind die unbeabsichtigten Folgen dieses Ansatzes?
Vishal
15

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

Zim
quelle
3

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

Dariusz Filipiak
quelle
1

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.

jfxiao
quelle
-1 Diese Antwort ergibt für mich keinen Sinn. Spalten summieren sich nicht zu 12. Namens- und Tastaturspalten überlappen sich. Ich verstehe nicht, wie es +2 Stimmen hat.
Mariano Desanze
-3

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>
mikeschuld
quelle
In Bootstrap können nur Spalten unmittelbare untergeordnete Elemente von Zeilen sein.
Sai Dubbaka