Я хочу разделить строку bootstrap
на 5 равных частей. Он включает 12-col-md
, так как я могу разделить его на равные 5 частей?
Может ли кто-нибудь помочь мне решить эту проблему?
Я хочу разделить строку bootstrap
на 5 равных частей. Он включает 12-col-md
, так как я могу разделить его на равные 5 частей?
Может ли кто-нибудь помочь мне решить эту проблему?
Отличный способ разрешить это здесь!
По умолчанию Bootstrap не предоставляет сетку, которая позволяет нам создавать макет пяти столбцов, но, как вы можете видеть, это довольно просто. Сначала вам нужно создать определение столбца по умолчанию так, как это делает Bootstrap. Я назвал свои классы col -..- 15.
.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;
}
}
Теперь вы готовы объединить свои классы с оригинальными классами Bootstrap. Например, если вы хотите создать элемент div, который ведет себя как макет пяти столбцов на средних экранах и, как четыре столбца на более мелких, вам просто нужно использовать что-то вроде этого:
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
Версия старого бутстрапа
Используйте пять div с классом span2 и дайте первому классу 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>
Пять одинаково разнесенных и центрированных столбцов.
<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>
<ч/" > CUSTOM STYLE
Пользовательские стили
.container {width:100%; float:left;}
.col1{ width:20%; float:left}
Последний стиль таблицы
.container {width:100%;display:table;}
.col1{ width:20%; display:table-cell;}
Вы можете использовать что-то вроде
<div class="container">
<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>
</div>
первый контейнер будет иметь смещение, так что вы будете иметь одинаковый запас (col-sm-1) с левой и правой стороны с 5 равными контейнерами внутри.
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-4 bg-danger">1</div>
<div class="col-md-4 bg-success">2</div>
<div class="col-md-4 bg-danger">3</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-6 bg-success">4</div>
<div class="col-md-6 bg-danger">5</div>
</div>
</div>
</div>
это довольно просто, если вы используете bootstrap 4, не уверен, что он также работает в bootstrap 3
<div class="container-fluid">
<h2>Bootstrap 4 Five Columns</h2>
<h5>Full-width (within .container-fluid)</h5>
<div class="row">
<div class="col">
<img src="//placehold.it/640x480" class="img-fluid">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
Вы можете использовать span2
для использования максимального объема пространства.
Код:
<div class="row-fluid">
<div class="span2">1</div>
<div class="span2">2</div>
<div class="span2">3</div>
<div class="span2">4</div>
<div class="span2">5</div>
</div>
Используйте это свойство css в файле custromScript.css для использования на больших устройствах
.col-lg-2-0 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
и используйте класс col-lg-2-0
вместо col-lg-2
который разделит четыре столбца