8 столбцов в Twitter Bootstrap
Как настроить 8 одинаковых столбцов в последней версии загрузочного буфера Twitter.
Я могу создать 4 равных столбца, выполнив следующее, но не получим, как я могу получить 8:
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
</div>
</div>
Ответы
Ответ 1
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
Ответ 2
У меня была та же проблема, и я отправил 4 столбца, каждый из которых содержит 2 вложенных столбца.
Ответ 3
Добавьте стиль, подобный этому, в таблицу стилей загрузки, style.css:
.col-8{
width: 12.5%;
}
Затем добавьте его в свой html.
<div class="row">
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
</div>
Ответ 4
Я знаю, что это довольно старая тема, но это лучший результат поиска для этой проблемы, поэтому я надеюсь, что я согласен с ответом, который, по моему мнению, лучше, чем любой из существующих здесь вариантов.
В макете n-столбца я не хочу, чтобы было оглашено какое-то странное содержимое .row .col-, которое не позволяет изменять размер, когда я перемещаюсь вниз в контрольных точках.
Например, текущий принятый ответ здесь правильно указывает, что вы не можете сделать это при загрузке по умолчанию, но следующий ответ в строке подсказывает, что вы в гнезде .col-xs-3 внутри .col-xs-6, и я предполагаю, что многие люди пришедшие сюда используют это, потому что это единственный работоспособный ответ, который вы можете найти на первой странице поиска Google.
Что делать, если я хочу 8 столбцов на контрольной точке lg, а затем 4 столбца на планшетах и 2 столбца на мобильном? Этот ответ не грамотно деградирует. Этот метод будет, и это невероятно легко реализовать.
Сначала добавьте это в свой файл CSS:
.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-8r {
width: 12.5%;
float: left;
}
@media (min-width: 768px) {
.col-sm-8r {
width: 12.5%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-8r {
width: 12.5%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-8r {
width: 12.5%;
float: left;
}
}
Затем добавьте col-*-8r в свои столбцы следующим образом:
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-8r">
...
</div>
</div>
Теперь у вас есть раскладка в 8 столбцов, которая может работать на всех контрольных точках.
Приятная вещь об этом методе заключается в том, что если вам нужно нечетное количество столбцов, очень просто расширить это. Вы просто делите 100 на сколько угодно столбцов, а затем используйте это число вместо 4 экземпляров width: 12.5%; в приведенном выше коде (очевидно, не забывайте обновлять имена классов до любого числа, которое вы используете).
Например, если вам нужен макет из 7 столбцов, вы должны использовать абсурдно длинный width: 14.28571428571429% вместо этих четырех экземпляров, измените имена классов на .col-*-7r, а затем вы можете отказаться от имени класса в любом месте хотите.
Ответ 5
Вы можете выполнить следующие шаги, чтобы получить 8 столбцов в начальной загрузке.
<!-- 8 Column -->
<div class="8-column">
<!-- Container -->
<div class="container">
<!-- Parent row -->
<div class="row">
<!-- 1st parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /1st parent column -->
<!-- 2nd parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /2nd parent column -->
<!-- 3rd parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /3rd parent column -->
<!-- 4th parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /4th parent column -->
</div>
<!-- /Parent row -->
</div>
<!-- /Container -->
</div>
<!-- /8 Column -->
Ответ 6
Как сказал BenM выше, Bootstrap использует 12-ти колонную сетку, которая не будет делить чисто на 8 равных столбцов.
Если вам абсолютно требуется 8 столбцов, возможно, стоит проверить this или даже сворачивание собственных.
Ответ 7
Для 8-ти столбцовой сетки вам не нужно настраивать css или html.
Просто создайте или скопируйте это:
<div class="col-md-6">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
<div class="col-md-6">
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3">7</div>
<div class="col-md-3">8</div>
</div>
