Pięć równych kolumn w twitterowym pasku startowym

361

Chcę mieć 5 równych kolumn na stronie, którą tworzę i wydaje mi się, że nie rozumiem, w jaki sposób używana jest siatka 5 kolumn: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsive

Czy pięciokolumnowa siatka jest pokazana powyżej części szkieletu bootstrap?

Gandalf
źródło
Patrzysz na bardzo starą wersję paska ładującego. Czy chcesz mieć 5-kolumnową „responsywną” siatkę na (najnowszym, mam nadzieję) ładowaniu?
Andres Ilich,
3
Właśnie zdałem sobie z tego sprawę. Jedna z nich to v1.3.0, a prąd to 2.0.2. Najnowsza wersja to 12-kolumnowa siatka, co oznacza, że ​​mogę mieć 2,3,4 i 6 równych kolumn. Pytałem, czy możliwe byłoby posiadanie 5 równych kolumn bez konieczności zmiany wielu rzeczy.
Gandalf
możesz tak, ale będzie to wymagało ciężkich modyfikacji niektórych elementów siatki, a także responsywnych elementów siatki. Czy Twoja witryna w ogóle reaguje? Tak byłoby nieco łatwiej wymyślić odpowiedź, w przeciwnym razie byłoby dużo kodu.
Andres Ilich,
Tak, strona jest responsywna, ale musiałbym zmodyfikować elementy siatki, a nie tylko część responsywna imho.
Gandalf
1
Mam pewien sukces * z .container.one-fifth.column {szerokość: 17%; } chociaż spodziewam się czegoś okropnego, by zaparło mi dech w piersiach 17,87847%.
Gandalf

Odpowiedzi:

406

Użyj pięciu div z klasą span2 i nadaj pierwszej klasę offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila! Pięć równo rozmieszczonych i wyśrodkowanych kolumn.


W bootstrap 3.0 wyglądałby ten kod

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>
jkofron.e
źródło
44
nie idzie na pełnej szerokości. to jest miłe
machineaddict
45
Rozwiązanie, które opublikowałem, ma pełną szerokość i tworzy 5 równych kolumn: TU JEST ODPOWIEDŹ .
Fizzix
5
Nie idzie na pełną szerokość, jak odpowiedź poniżej @fizzix. Robi niechciany margines po obu stronach, tak jak - jsfiddle.net/wdo8L1ww
Fizzix
3
kolumny z tym rozwiązaniem wyglądają raczej na małe, więc wolę rozwiązanie
@fizzix
2
Bootstrap 4 5 cols (pełna szerokość) nie wymaga CSS ani SASS: stackoverflow.com/a/42226652/171456
Zim
526

Dla Bootstrap 3 i nowszych

Fantastyczny pełnej szerokości 5 kolumn układ z Twitter Bootstrap powstała tutaj .

Jest to zdecydowanie najbardziej zaawansowane rozwiązanie, ponieważ bezproblemowo współpracuje z Bootstrap 3. Pozwala na wielokrotne używanie klas w połączeniu z aktualnymi klasami Bootstrap w celu responsywnego projektowania.

CSS:
Dodaj to do globalnego arkusza stylów, a nawet na dole bootstrap.cssdokumentu.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Wykorzystaj!
Na przykład, jeśli chcesz utworzyć element div, który zachowuje się jak układ pięciu kolumn na średnich ekranach i jak dwie kolumny na mniejszych ekranach, wystarczy użyć czegoś takiego:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

WORKING DEMO - Rozwiń ramkę, aby zobaczyć, jak kolumny reagują.

INNA DEMO - Włączenie nowychcol-*-5thsklas z innymi, takimi jakcol-*-3icol-*-2. Zmień rozmiar ramki, aby zobaczyć, jak wszystkie zmieniają sięcol-xs-6w responsywnym widoku.


Dla Bootstrap 4

Bootstrap 4 teraz domyślnie korzysta z Flexboksa, więc masz dostęp do jego magicznych mocy od razu po wyjęciu z pudełka. Sprawdź kolumny automatycznego układu, które dynamicznie dostosowują szerokość w zależności od liczby zagnieżdżonych kolumn.

Oto przykład:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

DEMO ROBOCZE

Fizzix
źródło
1
Nazywanie ich col-*-15może być mylące. Wydaje się, że implikuje to, że są częścią 15-kolumnowego systemu siatki, co nie jest.
Paul D. Waite
2
@ PaulD.Waite - dodałem małą notatkę do mojej odpowiedzi, aby poinformować ludzi.
Fizzix
2
col-*-15jest ze mną w porządku, ale col-*-5thsmoże to być nieco mniej myląca nazwa kolumny. Właśnie tego używam, aby moi inni programiści nie przyszli do mnie zdezorientowani.
Mordred,
3
Hej @scragar - Jeśli wyświetlisz styl wszystkich bieżących klas kolumn Bootstrap, zauważysz, że wszystkie one zawierają position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;. Zasadniczo kod, który opublikowałem, jest po prostu rozszerzany, aby dokładnie odpowiadały wbudowanemu stylowi Bootstrap. Następnie stosuję szerokość 20%, aby 5 równych kolumn zmieściło się na stronie. Bardzo proste :)
Fizzix,
1
co powiesz na nazewnictwo dla kolumny 2/5? A może powinniśmy użyć: col-md-1ths dla 1/5 i col-md-2ths dla 2/5, col-md-5ths dla 5/5 = pełna szerokość?
Alex
166

W przypadku Bootstrap 3 , jeśli chcesz mieć pełną szerokość i używasz LESS, SASSlub czegoś podobnego, wszystko, co musisz zrobić, to skorzystać z funkcji miksowania Bootstrap make-md-column ,make-sm-column itp

MNIEJ:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

SASS:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

Nie tylko można zbudować prawdziwe pełnej szerokości kolumn klasy bootstrap za pomocą tych wstawek, ale można również zbudować wszystkie związane z nimi zajęcia pomocnicze jak .col-md-push-*, .col-md-pull-*oraz .col-md-offset-*:

MNIEJ:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

SASS:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

Inne odpowiedzi mówią o ustawieniu, @gridColumnsktóre jest całkowicie poprawne, ale to zmienia szerokość kolumny rdzenia dla całego bootstrapu. Użycie powyższych funkcji miksowania doda układ 5 kolumn na domyślnych kolumnach bootstrap, więc nie zepsuje żadnych narzędzi innych firm ani istniejącego stylu.

lightswitch05
źródło
5
Najczystsze rozwiązanie, podobnie jak 2.45. z 12 ( 2.4*5=12), działa dla Bootstrap 3 w siatce 12-kolumnowej. Dotyczy to także make-xs, make-smale to nie będzie działać w połączeniu z innymi definicjami standardowymi col (ostatni priorytet dostać)
Sherbrow
6
Jestem zszokowany stosunkowo niewielkim poparciem dla tej odpowiedzi. Jest zdecydowanie najmniej hackerski, używając nie tylko tej samej konwencji nazewnictwa, co inne klasy kolumn Bootstrap, ale także tych samych miksów, których używa Bootstrap do tworzenia własnych kolumn, co czyni go prawdopodobnie przyszłym aż do Bootstrap 4, przynajmniej.
Chris Fritz,
3
To ma być najlepsza odpowiedź. Stworzyłem biblioteki (w tym offset, pulla push) w oparciu o to na własny użytek. Krępuj się to sprawdzić
Kenny Ki
1
Jak wszyscy powiedzieli, tak, to jest teraz poprawna odpowiedź. @ Sherbrow powiedział, że „nie będą działać w połączeniu z innymi standardowymi definicjami col”, ale nie dzieje się tak, ponieważ to rozwiązanie jest w jakiś sposób złe, po prostu dlatego, że 12% 5! = 0.
Nick M
2
@ lightswitch05 Niestety nie było to dla mnie odpowiednie, ponieważ miałem dynamiczną liczbę kolumn. Gdybym miał tylko jedną kolumnę, nadal chciałbym, aby była to piąta część ekranu, ale korzystając z odpowiedzi Fizzix, jedna kolumna obejmowałaby cały ekran. Udało mi się to rozwiązać za pomocą nowych funkcji miksowania Bootstrap 4. Mogę zaktualizować twoją odpowiedź, aby to uwzględnić, jeśli chcesz?
Plog
40

Aktualizacja 2019

Bootstrap 4.1+

Oto 5 równych kolumn o pełnej szerokości ( bez dodatkowego CSS lub SASS ) przy użyciu siatki automatycznego układu :

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

To rozwiązanie działa, ponieważ Bootstrap 4 jest teraz Flexbox. Możesz uzyskać 5 kolumn do zawijania w tym samym miejscu, .rowużywając podziału takiego jak <div class="col-12"></div>lub <div class="w-100"></div>co 5 kolumn.

Zobacz także: Bootstrap - układ 5 kolumn

Zim
źródło
2
Nie mogę się doczekać, aż będzie stabilny :)
nicolallias
2
Dobra, ale działa tylko z rzędami 5 elementów. Jeśli dostaniesz więcej, jesteś w błędzie. Zobacz moje wzmocnione skrzypce tutaj: jsfiddle.net/djibe89/ntq8h910
djibe
Dlatego wyjaśniłem, że musisz używać przerwy co 5 kolumn. Twoje rozwiązanie działa, ale wymaga dodatkowego CSS.
Zim
Rozważ również dodanie flex-nowrapdo, .rowponieważ (automatyczne) kolumny mogą przekraczać szerokość rodzica.
Luuk Skeur,
31

Poniżej znajduje się kombinacja odpowiedzi @machineaddict i @Mafnah, napisana od nowa dla Bootstrap 3 (do tej pory działała dobrze):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
plaidcorp
źródło
Gdzie to umieścić i jak z niego korzystać?
sergserg,
1
@Serg 1. Umieść go poniżej / za plikiem css Bootstrap 2. Dodaj klasę .fivecolumns do .row, a następnie zagnieżdż pięć kolumn z klasą .col [, - sm, -lg] -2
plaidcorp
W niektórych przypadkach nie ma idealnej pełnej szerokości.
Fizzix,
Dlaczego col-xs-2 nie jest dodawany do deklaracji?
ganders
@ Ganders to tylko widok; sprawdź inną odpowiedź na tej stronie: stackoverflow.com/questions/10387740/…
plaidcorp
27

Zachowaj oryginalny pasek startowy z 12 kolumnami, nie dostosowuj go. Jedyną modyfikacją, którą musisz wprowadzić, jest trochę css po oryginalnym css reagującym na bootstrap, jak poniżej:

Poniższy kod został przetestowany dla Bootstrap 2.3.2:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

I html:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Uwaga: Chociaż span2 razy 5 nie równa się 12 kolumnom, masz pomysł :)

Działający przykład można znaleźć tutaj http://jsfiddle.net/v3Uy5/6/

machineaddict
źródło
10

Jeśli nie potrzebujesz dokładnie takiej samej szerokości kolumn, możesz spróbować utworzyć 5 kolumn za pomocą zagnieżdżenia:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

Pierwsze dwie kolumny będą miały szerokość równą 5/12 * 1/2 ~ 20,83%

Ostatnie trzy kolumny: 7/12 * 1/3 ~ 19,44%

Taki hack daje akceptowalny rezultat w wielu przypadkach i nie wymaga żadnych zmian CSS (używamy tylko natywnych klas bootstrap).

DraggonZ
źródło
9

Utwórz niestandardowy plik do pobrania Bootstrap dla układu 5 kolumn

Przejdź do strony dostosowania Bootstrap 2.3.2 (lub Bootstrap 3 ) i ustaw następujące zmienne (nie wprowadzaj średników):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

Pobierz swoją wersję. Ta siatka zmieściłaby się w domyślnych pojemnikach, zachowując domyślne szerokości rynny (prawie).

Uwaga: Jeśli używasz MNIEJ, zaktualizuj variables.lesszamiast tego.

Pavlo
źródło
7

Z Flexbox http://output.jsbin.com/juziwu

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}
<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>

kocioł
źródło
Flexbox jest lepszy niż bootstrap, jeśli odpowiada Twoim potrzebom.
ml242,
6

Głosowałem za odpowiedzią Mafnah, ale patrząc na to jeszcze raz, sugeruję, że poniższe jest lepsze, jeśli zachowujesz domyślne marginesy itp.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}
Studio4
źródło
1
Rzeczywista szerokość wynosi 17,94872% i nie odpowiada, będziesz musiał ustawić nowy margines dla każdej kolumny we wszystkich zapytaniach @media.
machineaddict
5
<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}
Mafna
źródło
1
powinno to być .equal .span2 {szerokość: 20%; }
Studio4
... i to NIE działa. każda kolumna, z wyjątkiem pierwszej, ma margines.
machineaddict
5

Utwórz 5 elementów za pomocą klasy col-sm-2 i dodaj do pierwszego elementu również klasę col-sm-offset-1

Ps to nie będzie pełna szerokość (będzie nieco wcięte z prawej i lewej strony ekranu)

Kod powinien wyglądać mniej więcej tak

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
agDev
źródło
5

Bootstrap 4, zmienna liczba kolumn na wiersz

Jeśli chcesz mieć do pięciu kolumn w wierszu, aby mniej liczb nadal zajmowało tylko 1/5 każdego wiersza, rozwiązaniem jest użycie miksów Bootstrap 4 :

SCSS:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>
DaGUY
źródło
4

Innym sposobem włączenia 5 kolumn w Bootstrap 3 jest modyfikacja formatu 12 kolumn używanego domyślnie przez Bootstrap. A następnie utwórz siatkę 20 kolumn (użyj dostosuj na stronie Bootstrap LUB użyj wersji LESS / SASS).

Aby dostosować w witrynie bootstrap, przejdź do strony Dostosuj i pobierz , zaktualizuj zmienną @grid-columnsz 12do 20. Następnie będziesz mógł utworzyć 4, a także 5 kolumn.

Nipson
źródło
3

Można to zrobić poprzez zagnieżdżanie i użycie odrobiny over-css css.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div><!-- end outer row -->

Potem trochę css

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

Oto przykład: 5 równy przykład kolumny

A oto mój pełny opis na ścianie kodowej

Pięć równych kolumn w bootstrap 3

bradrice
źródło
3

Moim zdaniem lepiej używać go w ten sposób ze składnią Less. Ta odpowiedź jest oparta na odpowiedzi z @fizzix

W ten sposób kolumny wykorzystują zmienne (@ grid-gutter-width, media breakpoints), które użytkownik mógł przesłonić, a zachowanie pięciu kolumn pasuje do zachowania siatki 12 kolumn.

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */
in vitro
źródło
3

Domyślnie Bootstrap nie zapewnia systemu siatki, który pozwala nam utworzyć układ pięciu kolumn, musisz utworzyć domyślną definicję kolumny w taki sposób, aby Bootstrap tworzył niestandardowe klasy i zapytania o media w pliku css

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

i trochę kodu HTML

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
byteC0de
źródło
3

Bootstrap domyślnie może skalować do 12 kolumn? Oznacza to, że jeśli chcemy stworzyć 12-kolumnowy układ o równej szerokości, zapisalibyśmy wewnątrz div class = "col-md-1" dwanaście razy.

<div class="row">
<div class="col-md-1"></div>    
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>
Manish Verma
źródło
3

Układ 5 kolumn w stylu Twitter Bootstrap

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
Sanjib Debnath
źródło
3

Rozwiązanie, które nie wymaga dużo CSS, ani poprawiania domyślnego układu 12col:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}
nicolallias
źródło
3

Wystarczy utworzyć nową klasę i zdefiniować jej zachowanie dla każdego zapytania medialnego w razie potrzeby

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

tutaj jest działające demo https://codepen.io/giorgosk/pen/BRVorW

GiorgosK
źródło
2

W bootstrap 3 myślę, że możemy zrobić coś takiego, aby usunąć lewy i prawy margines:

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

i CSS

.this_row {
    margin: 0 -5%;
}
guaph
źródło
2

Jak dodać siatkę 5 kolumn w bootstrapie

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }
<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>

Robind Kumar
źródło
2

najłatwiejszym rozwiązaniem bez potrzeby edycji CSS byłoby:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

A jeśli potrzebujesz, aby złamały się one poza jakimkolwiek punktem przerwania, po prostu stwórz blok btn-group. Mam nadzieję, że to komuś pomoże.

Vikas Baru
źródło
2

Pięć kolumn wyraźnie nie jest częścią bootstrap z założenia.

Ale w przypadku Bootstrap v4 (alfa) istnieją 2 rzeczy, które mogą pomóc w skomplikowanym układzie siatki

  1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), nowy typ elementu (oficjalny - https://www.w3.org/TR/css-flexbox-1/ )
  2. Elastyczne narzędzia ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

Mówiąc krótko, używam

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

Czy to 5,7,9,11,13, czy coś innego, wszystko będzie dobrze. Jestem pewien, że standard 12-gridowy jest w stanie obsłużyć ponad 90% przypadków użycia - więc zaprojektujmy w ten sposób - również łatwiej się rozwijaj!

Fajny samouczek Flex jest dostępny tutaj „ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

gonatee
źródło
2

Stworzyłem definicje miksów SASS na podstawie definicji bootstrap dla dowolnej liczby kolumn (osobiście obok 12 używam 8, 10 i 24):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index}-#{$num-columns} {
            width: percentage(($index / $num-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index}-#{$num-columns} {
            left: percentage(($index / $num-columns));
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index}-#{$num-columns} {
            right: percentage(($index / $num-columns));
        }
    }
    @if ($type == offset) and ($index > 0) {
        .col-#{$class}-offset-#{$index}-#{$num-columns} {
            margin-left: percentage(($index / $num-columns));
        }
    }
}

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

Możesz po prostu tworzyć klasy, wykonując:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

Mam nadzieję, że ktoś uzna to za przydatne

Nulen
źródło
2

Czy ktoś używa bootstrap-sass (v3), oto prosty kod dla 5 kolumn przy użyciu mieszania bootstrap:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Upewnij się, że podałeś:

@import "bootstrap/variables";
@import "bootstrap/mixins";
Vedmant
źródło
1
dzięki, tego właśnie szukałem, zrobiłem też 1-5, 2-5, itd., a nawet teraz 3-10, itd., aby mieć większą elastyczność, bardzo wygodne
morksinaanab
2

Dla Bootstrap 4.4+

Użyj zupełnie nowych row-cols-nklas.

  1. Dodaj row-cols-5klasę do swojego .rowdiva. Nie wymaga niestandardowego CSS.
  2. Zobacz dokument 4.4 tutaj dla wierszy-wierszy: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Dla wersji Bootstrap 4 wcześniejszych niż Bootstrap 4.4

  1. Skopiuj CSS poniżej (niesamowity CSS autorów Bootstrap) i dodaj go do swojego projektu

  2. Przeczytaj dokumenty cytowane powyżej, aby używać go poprawnie.

    .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

djibe
źródło
1

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}

Aroos
źródło