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?
Odpowiedzi:
Użyj pięciu div z klasą span2 i nadaj pierwszej klasę offset1.
Voila! Pięć równo rozmieszczonych i wyśrodkowanych kolumn.
W bootstrap 3.0 wyglądałby ten kod
źródło
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.css
dokumentu.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:
WORKING DEMO - Rozwiń ramkę, aby zobaczyć, jak kolumny reagują.
INNA DEMO - Włączenie nowych
col-*-5ths
klas z innymi, takimi jakcol-*-3
icol-*-2
. Zmień rozmiar ramki, aby zobaczyć, jak wszystkie zmieniają sięcol-xs-6
w 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:
DEMO ROBOCZE
źródło
col-*-15
może być mylące. Wydaje się, że implikuje to, że są częścią 15-kolumnowego systemu siatki, co nie jest.col-*-15
jest ze mną w porządku, alecol-*-5ths
moż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.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 :)W przypadku Bootstrap 3 , jeśli chcesz mieć pełną szerokość i używasz
LESS
,SASS
lub czegoś podobnego, wszystko, co musisz zrobić, to skorzystać z funkcji miksowania Bootstrapmake-md-column
,make-sm-column
itpMNIEJ:
SASS:
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:
SASS:
Inne odpowiedzi mówią o ustawieniu,
@gridColumns
któ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.źródło
2.4
5. z 12 (2.4*5=12
), działa dla Bootstrap 3 w siatce 12-kolumnowej. Dotyczy to takżemake-xs
,make-sm
ale to nie będzie działać w połączeniu z innymi definicjami standardowymi col (ostatni priorytet dostać)offset
,pull
apush
) w oparciu o to na własny użytek. Krępuj się to sprawdzić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 :
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,
.row
uż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
źródło
flex-nowrap
do,.row
ponieważ (automatyczne) kolumny mogą przekraczać szerokość rodzica.Poniżej znajduje się kombinacja odpowiedzi @machineaddict i @Mafnah, napisana od nowa dla Bootstrap 3 (do tej pory działała dobrze):
źródło
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:
I html:
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/
źródło
Jeśli nie potrzebujesz dokładnie takiej samej szerokości kolumn, możesz spróbować utworzyć 5 kolumn za pomocą zagnieżdżenia:
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).
źródło
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):
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.less
zamiast tego.źródło
Z Flexbox http://output.jsbin.com/juziwu
źródło
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.
źródło
źródło
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
źródło
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:
HTML:
źródło
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-columns
z12
do20
. Następnie będziesz mógł utworzyć 4, a także 5 kolumn.źródło
Można to zrobić poprzez zagnieżdżanie i użycie odrobiny over-css css.
Potem trochę css
}
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
źródło
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.
źródło
To jest niesamowite: http://www.ianmccullough.net/5-column-bootstrap-layout/
Po prostu zrób:
I CSS:
źródło
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
i trochę kodu HTML
źródło
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.
źródło
Układ 5 kolumn w stylu Twitter Bootstrap
źródło
Rozwiązanie, które nie wymaga dużo CSS, ani poprawiania domyślnego układu 12col:
http://jsfiddle.net/0ufdyeur/1/
HTML:
CSS:
źródło
Wystarczy utworzyć nową klasę i zdefiniować jej zachowanie dla każdego zapytania medialnego w razie potrzeby
tutaj jest działające demo https://codepen.io/giorgosk/pen/BRVorW
źródło
W bootstrap 3 myślę, że możemy zrobić coś takiego, aby usunąć lewy i prawy margines:
i CSS
źródło
Jak dodać siatkę 5 kolumn w bootstrapie
źródło
najłatwiejszym rozwiązaniem bez potrzeby edycji CSS byłoby:
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.
źródło
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
Mówiąc krótko, używam
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/ ”
źródło
Stworzyłem definicje miksów SASS na podstawie definicji bootstrap dla dowolnej liczby kolumn (osobiście obok 12 używam 8, 10 i 24):
Możesz po prostu tworzyć klasy, wykonując:
Mam nadzieję, że ktoś uzna to za przydatne
źródło
Czy ktoś używa bootstrap-sass (v3), oto prosty kod dla 5 kolumn przy użyciu mieszania bootstrap:
Upewnij się, że podałeś:
źródło
Dla Bootstrap 4.4+
Użyj zupełnie nowych
row-cols-n
klas.row-cols-5
klasę do swojego.row
diva. Nie wymaga niestandardowego CSS.Dla wersji Bootstrap 4 wcześniejszych niż Bootstrap 4.4
Skopiuj CSS poniżej (niesamowity CSS autorów Bootstrap) i dodaj go do swojego projektu
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%}}
źródło
źródło