Bootstrap 3.0 - płynna siatka zawierająca stałe rozmiary kolumn

Uczę się korzystać z Bootstrapa. Obecnie brodzę przez układy. Chociaż Bootstrap jest całkiem fajny, wszystko, co widzę, wydaje się przestarzałe. Na całe życie mam coś, co uważam za podstawowy układ, którego nie mogę zrozumieć. Mój układ wygląda następująco:

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

Ta siatka musi zajmować całą wysokość okna. Z mojego zrozumienia potrzebuję mieszać stałe i płynne szerokości. Jednak Bootstrap 3.0 nie wydaje się już mieć klasy płynnej. Nawet gdyby tak było, nie potrafię wymyślić, jak połączyć płynne i stałe rozmiary kolumn. Czy ktoś wie, jak to zrobić w Bootstrap 3.0?

Naprawdę nie ma łatwego sposobu na połączenie płynnych i stałych szerokości z Bootstrap 3. Tak ma być, ponieważ system siatki został zaprojektowany tak, aby był płynny i responsywny. Możesz spróbować coś zhakować, ale byłoby to sprzeczne z tym, co próbuje zrobić system Responsive Grid, którego celem jest sprawienie, aby układ ten przepływał przez różne typy urządzeń.

Jeśli chcesz trzymać się tego układu, rozważyłbym ułożenie strony za pomocą niestandardowego arkusza CSS i nie korzystanie z siatki.

edycja: Ponieważ wydaje się, że wiele osób chce to zrobić, napisałem krótki przewodnik z bardziej ogólnym przypadkiem użycia tutaj https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Mam nadzieję, że to pomoże.

System siatki bootstrap3 obsługuje zagnieżdżanie wierszy, co umożliwia dostosowanie rzędu głównego, aby umożliwić menu boczne o stałej szerokości.

Musisz umieścić dopełnienie po lewej stronie w wierszu głównym, a następnie mieć wiersz podrzędny, który zawiera normalne elementy układu siatki.

Oto, jak zwykle to robię 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;
}

lub użyj właściwości display z table-cell;

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/

Miałem nieco inny problem:

• Musiałem połączyć kolumny stałe i płynne jako część tabeli, a nie jako część układu pełnego okna
• Potrzebowałem przymocować kolumny po lewej i prawej stronie
• Nie martwiłem się, że tła kolumn używają pełnej wysokości wiersza zawierającego

W rezultacie uciekłem się floatdo lewej i prawej kolumny, a następnie mogłem użyć Bootstrap rowdo wykonania płynnych kolumn pomiędzy.

<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>

Zaktualizowano 2018

IMO, najlepszym sposobem rozwiązania tego problemu w Bootstrap 3 byłoby użycie zapytań o media, które są wyrównane z punktami przerwania Bootstrap, tak aby używać tylko kolumn o stałej szerokości i większych ekranach, a następnie pozwolić układowi układać się responsywnie na mniejszych ekranach. W ten sposób zachowujesz responsywność ...

@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 będzie miał flexbox, więc układy takie jak ten będą znacznie łatwiejsze: http://www.codeply.com/go/eAYKvDkiGw

OK, moja odpowiedź jest super fajna:

<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 plac zabaw

jeśli chcesz obsługiwać wszystkie przeglądarki, użyj https://github.com/10up/flexibility

UPDATE 2014-11-14: Poniższe rozwiązanie jest zbyt stare, polecam użycie metody układu flex box. Oto przegląd: http://learnlayout.com/flexbox.html

Moje rozwiązanie

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;
  }
}

Bez modyfikowania zbyt dużej ilości kodu układu bootstrap.

Aktualizacja (nie z OP): dodanie fragmentu kodu poniżej, aby ułatwić zrozumienie tej odpowiedzi. Ale wydaje się, że nie działa zgodnie z oczekiwaniami.

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>

Dlaczego po prostu nie ustawić dwóch lewych kolumn na stałe z we własnym css, a następnie utworzyć nowy układ siatki z pełnymi 12 kolumnami dla pozostałej zawartości?

<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>