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


126

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?


Przyjrzyj się używaniu tabel obok wierszy i kolumn.
kalu

Oto przykład stałego płynu dla Bootstrap 3: codeply.com/go/GN4QinVrjI
Zim

Odpowiedzi:


32

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.


5
Myślę, że takie rzeczy będą musiały poczekać, aż Flexbox będzie miał pełne wsparcie, ale nadal jest naprawdę kiepski. Model Bootstrap jest świetny, gdy liczba kolumn jest statyczna, ale np. Jeśli możesz dynamicznie ukrywać i wyświetlać kolumny, obsługa co najmniej jednej kolumny jako płynnej zaczyna mieć dużo większy sens.
Nate Bundy

1
Edytuj swoją odpowiedź, tak aby zawierała odniesienie do tego łącza wraz z rozwiązaniem. Pozdrawiam: stackoverflow.com/questions/8740779/…
Morty

151

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

Ten jest fajny, ale jeśli umieścisz wewnątrz ustalonej kolumny, np. Ten <p> <a class="btn btn-default" href="#" role="button"> Wyświetl szczegóły & raquo; </a> </p> lub menu rozwijanego Bootstrap, to nie działają one w stałej kolumnie. Czy jest na to jakieś rozwiązanie?
Vaclav Elias

@VaclavElias spróbuj umieścić w nim pełnowymiarową różnicę z pozycją: względna, a następnie listę rozwijaną? Pomaga, jeśli zrobisz jsfiddle, aby pokazać problem
w00t

Nie widzę jeszcze, jak to działa we wszystkich przeglądarkach, ale poza tym dobra robota, dobra robota.
Phil Cooper

Czy można to zrobić ze stałymi kolumnami po prawej stronie?
Sean

3
position: fixedoznacza, że ​​podczas przewijania zawartość tej kolumny unosi się nad resztą strony. W moim przypadku naprawiłem to za pomocą position: absolute.
laurent

26

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/


1
Problem jest wtedy, gdy używasz ex. `.visible-xs , becouse display: table-cell` stało się display:block...
Dariusz Filipiak

21

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>

4
@Schemetrical Nie miałem pytania. Wyjaśniłem, że mam nieco inny problem i dodałem rozwiązanie, do którego przyszedłem, aby pomóc innym osobom, które przyjechały tutaj z Google.
Paddy Mann

1
twoja odpowiedź jest nieoceniona. Całkiem proste, ale rozwiązujące mój problem. Wielkie dzięki.
Charles

Dlaczego nie możesz podać wierszowi div marginesów, które zawiera element div w twojej odpowiedzi?
GreenAsJade

Ta odpowiedź jest naprawdę uzasadniona. Jeśli potrzebujesz użyć kolumn bootstrap, ale nie chcesz, aby zwijały się przy pewnych szerokościach ekranu, to jest to, czego potrzebujesz (na przykład użyj pull-left / pull-right zamiast col-md-3).
Sam

Wydaje się, że to świetna odpowiedź. Mam problemy z moim marginiw paddingmoim rzędzie pośrodku, ale to powinien być problem do rozwiązania. Jakie są niezamierzone konsekwencje takiego podejścia?
Vishal

15

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


3

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


1

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.


-1 Ta odpowiedź nie ma dla mnie żadnego sensu. Kolumny nie sumują się do 12. Kolumny nazw i klawiatury nakładają się. Nie rozumiem, jak to ma +2 głosy.
Mariano Desanze

-3

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>

W Bootstrap tylko kolumny mogą być bezpośrednimi elementami potomnymi wierszy.
Sai Dubbaka,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.