Я хочу настроить столбцы в Twitter Boοtstrap.
Я знаю, что в бутстрапе есть сетка из 12 столбцов. Есть ли способ манипулировать сетками, чтобы было 1.5 3.5 3.5 3.5 вместо 3 3 3 3?
Я хочу настроить столбцы в Twitter Boοtstrap.
Я знаю, что в бутстрапе есть сетка из 12 столбцов. Есть ли способ манипулировать сетками, чтобы было 1.5 3.5 3.5 3.5 вместо 3 3 3 3?
Ответы:
Как правильно сказал @ bodi0 , это невозможно. Вам нужно либо расширить сеточную систему Bootstrap (вы можете искать и находить различные решения, вот пример из 7 столбцов), либо использовать вложенные строки, например http://bootply.com/dd50he9tGe .
В случае вложенных строк вы можете получить не всегда точный результат, а похожий
<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>
Вы также просто переопределяете ширину столбца ...
<div class="col-md-1" style="width: 12.499999995%"></div>
поскольку col-md-1
как имеет ширину 8.33333333%; просто умножьте 8,33333333 * 1,5 и установите его ширину.
in bootstrap 4
вам также придется переопределить свойства flex и max-width:
<div class="col-md-1" style="width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"></div>
ml-sm-auto
класс по-прежнему будет игнорировать это настраиваемое значение ширины: / (так что отзывчивость страницы
Короткий ответ - нет (технически вы можете дать любое имя класса, которое хотите, но это не повлияет, если вы не определите свой собственный класс CSS - и помните - в селекторе классов нет точек ). Длинный ответ снова отрицательный , потому что Bootstrap включает в себя адаптивную мобильную первую систему гибкой сетки, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или порта просмотра.
Строки должны быть размещены в пределах .container
(фиксированной ширины) или .container-fluid
(полной ширины) для правильного выравнивания и заполнения.
.row
и.col-xs-4
, доступны для быстрого создания макетов сетки. Меньшее количество миксинов также можно использовать для более семантических макетов..rows
..col-xs-4
..col-md-*
класса к элементу повлияет не только на его стиль на средних устройствах, но и на больших устройствах, если .col-lg-*
класс отсутствует.Возможное решение вашей проблемы - определить собственный класс CSS с желаемой шириной , допустим, .col-half{width:XXXem !important}
затем добавить этот класс к нужным элементам вместе с исходными классами CSS Bootstrap.
Создайте новые классы, чтобы перезаписать ширину. См. 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;
}
Как уже упоминалось в Bootstrap 3, вы можете использовать методы вложения / встраивания.
Однако сейчас становится все более очевидным использовать замечательную функцию из Bootstrap 4. у вас просто есть возможность использовать col-{breakpoint}-auto
классы (например col-md-auto
), чтобы автоматически определять размер столбцов на основе естественной ширины его содержимого. проверьте это например
Согласно ответу Рекса Блума, я написал помощника по начальной загрузке:
//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 имеет смещения столбцов, поэтому, если вам нужны столбцы одинаковой ширины без указания размера, используйте это.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Также проверьте эту ссылку https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints
Это не стандарт Bootstrap, чтобы дать col-md-1.5, и вы не можете редактировать bootstrap.min.css, потому что это неправильный путь. вы можете создать вот так http://www.bootply.com/125259
вы можете использовать этот код внутри 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%;
}
Это довольно старый вопрос, но я сделал его таким (в TYPO3).
Во-первых, я создал собственный доступный css-класс, который я могу выбирать для каждого элемента контента вручную.
Затем я создал внешний элемент из трех столбцов с 11 столбцами (1-9-1), наконец, я изменил ширину столбца первого и третьего столбца с помощью CSS до 12,499999995%.