Chcę dostosować kolumny w serwisie Twitter Boοtstrap.
Wiem, że w bootstrapie jest 12 siatek kolumn. Czy istnieje sposób na manipulowanie siatkami tak, aby miały 1,5 3,5 3,5 3,5 zamiast 3 3 3 3?
Chcę dostosować kolumny w serwisie Twitter Boοtstrap.
Wiem, że w bootstrapie jest 12 siatek kolumn. Czy istnieje sposób na manipulowanie siatkami tak, aby miały 1,5 3,5 3,5 3,5 zamiast 3 3 3 3?
Odpowiedzi:
Jak słusznie powiedział @ bodi0 , nie jest to możliwe. Musisz albo rozszerzyć system siatki Bootstrap (możesz wyszukiwać i znajdować różne rozwiązania, tutaj przykład 7 kolumn) lub użyć zagnieżdżonych wierszy, np . Http://bootply.com/dd50he9tGe .
W przypadku wierszy zagnieżdżonych możesz nie zawsze otrzymać dokładny wynik, ale podobny
<div class="row">
<div class="col-lg-5">
<div class="row">
<div class="col-lg-4">1.67 (close to 1.5)</div>
<div class="col-lg-8">3.33 (close to 3.5)</div>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-6">3.5</div>
<div class="col-lg-6">3.5</div>
</div>
</div>
</div>
Chmura jest również po prostu nadpisywana szerokości kolumny ...
<div class="col-md-1" style="width: 12.499999995%"></div>
Ponieważ col-md-1
ma szerokość 8,33333333%; po prostu pomnóż 8,33333333 * 1,5 i ustaw jako swoją szerokość.
w bootstrap 4
, będziesz też musiał nadpisać właściwość flex i max-width:
<div class="col-md-1" style="width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"></div>
ml-sm-auto
klasa nadal będzie ignorować tę niestandardową wartość szerokości: / (więc responsywność strony się
Krótka odpowiedź brzmi: nie (technicznie rzecz biorąc, możesz podać dowolną nazwę klasy, którą chcesz, ale to nie przyniesie efektu, chyba że zdefiniujesz własną klasę CSS - i pamiętaj - bez kropek w selektorze klas). Długa odpowiedź znowu brzmi: nie , ponieważ Bootstrap zawiera responsywny , mobilny pierwszy system płynnej siatki, który odpowiednio skaluje do 12 kolumn w miarę wzrostu rozmiaru urządzenia lub portu widoku.
Wiersze muszą być umieszczone w obrębie .container
(o stałej szerokości) lub .container-fluid
(pełnej szerokości), aby zapewnić prawidłowe wyrównanie i wypełnienie.
.row
i .col-xs-4
są dostępne do szybkiego tworzenia układów siatki. W przypadku układów bardziej semantycznych można również użyć mniejszej liczby mikserów..rows
..col-xs-4
..col-md-*
klasy do elementu wpłynie nie tylko na jego stylizację na średnich urządzeniach, ale także na dużych urządzeniach, jeśli .col-lg-*
klasa nie jest obecna.Możliwym rozwiązaniem tego problemu jest zdefiniowanie własnej klasy CSS o żądanej szerokości , powiedzmy, że .col-half{width:XXXem !important}
następnie dodaj tę klasę do wybranych elementów wraz z oryginalnymi klasami Bootstrap CSS.
Utwórz nowe klasy, aby nadpisać szerokość. Zobacz działający kod jFiddle .
<div class="row">
<div class="col-xs-1 col-xs-1-5">
<div class="box">
box 1
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 2
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 3
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 4
</div>
</div>
</div>
.col-xs-1-5 {
width: 12.49995%;
}
.col-xs-3-5 {
width: 29.16655%;
}
.box {
border: 1px solid #000;
text-align: center;
}
Jak inni wspomnieli w Bootstrap 3, możesz użyć technik zagnieżdżania / osadzania.
Jednak coraz bardziej oczywiste staje się teraz korzystanie z całkiem niesamowitej funkcji z Bootstrap 4. po prostu masz możliwość użycia col-{breakpoint}-auto
klas (np. col-md-auto
), aby automatycznie dopasować rozmiar kolumn na podstawie naturalnej szerokości ich zawartości. sprawdź to na przykład
Zgodnie z odpowiedzią Rexa Blooma napisałem pomocnika bootstrap:
//8,33333333% col-1
.extra-col {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-0-5 {
@extend .extra-col;
flex: 0 0 4.16666667%;
max-width: 4.16666667%;
}
.col-1-5 {
@extend .extra-col;
flex: 0 0 12.5%;
max-width: 12.5%;
}
.col-2-5 {
@extend .extra-col;
flex: 0 0 20.833333325%;
max-width: 20.833333325%;
}
.col-3-5 {
@extend .extra-col;
flex: 0 0 29.166666655%;
max-width: 29.166666655%;
}
.col-4-5 {
@extend .extra-col;
flex: 0 0 37.499999985%;
max-width: 37.499999985%;
}
.col-5-5 {
@extend .extra-col;
flex: 0 0 45.833333315%;
max-width: 45.833333315%;
}
.col-6-5 {
@extend .extra-col;
flex: 0 0 54.166666645%;
max-width: 54.166666645%;
}
.col-7-5 {
@extend .extra-col;
flex: 0 0 62.499999975%;
max-width: 62.499999975%;
}
.col-8-5 {
@extend .extra-col;
flex: 0 0 70.833333305%;
max-width: 70.833333305%;
}
.col-9-5 {
@extend .extra-col;
flex: 0 0 79.166666635%;
max-width: 79.166666635%;
}
.col-10-5 {
@extend .extra-col;
flex: 0 0 87.499999965%;
max-width: 87.499999965%;
}
.col-11-5 {
@extend .extra-col;
flex: 0 0 95.8333333%;
max-width: 95.8333333%;
}
Bootstrap ma przesunięcia kolumn, więc jeśli chcesz mieć kolumny o równej szerokości bez określania rozmiaru, użyj tego.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Sprawdź również ten link https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints
To nie jest standard Bootstrap, aby dać col-md-1.5 i nie możesz edytować pliku bootstrap.min.css, ponieważ nie jest to właściwy sposób. możesz tworzyć w ten sposób http://www.bootply.com/125259
możesz użyć tego kodu wewnątrz col-md-3, col-md-9
.col-side-right{
flex: 0 0 20% !important;
max-width: 20%;
}
.col-side-left{
flex: 0 0 80%;
max-width: 80%;
}
To pytanie jest dość stare, ale zrobiłem to w ten sposób (w TYPO3).
Po pierwsze, stworzyłem własną dostępną klasę css, którą mogę ręcznie wybrać dla każdego elementu treści.
Następnie utworzyłem zewnętrzny element trzech kolumn z 11 kolumnami (1 - 9 - 1), w końcu zmodyfikowałem szerokość pierwszej i trzeciej kolumny za pomocą CSS na 12,499999995%.