Как создать 8 столбцов в Bootstrap, который имеет 12 сеток?

Question

Как создать 8 столбцов в Bootstrap, который имеет 12 сеток?

Извините, я новичок в PHP и CSS …

Я пытаюсь изменить тему Evolve (WordPress) так, чтобы она составляла 8 столбцов на главной странице, но поскольку в этой теме используется Bootstrap с 12 сетками, мне не удается создать 8 четных столбцов. Я меняю файл с именем basic-functions.php и я не знаю, что (и где я могу сделать, чтобы иметь 8 четных столбцов).

switch ( $BoxCount ):
case $BoxCount == 8:
$BoxClass = 'col-md-2';

break;

default:
$BoxClass = 'col-md-3';
endswitch;

Я могу понять, что когда $BoxClass = 'col-md-2';тогда у меня будет 6 столбцов подряд и еще 2 столбца …

Теперь это выглядит так:

Как я могу сделать 8 столбцов подряд? (с зазором или без него)?

2

bootstrapping php wordpress

Решение

Другие решения

Добро пожаловать в переполнение стека.

Bootstrap и его сетка не имеют ничего общего с PHP, хотя, все это в файлах CSS и меньше. Теперь у вас не может быть меньше файлов, но в противном случае вы можете настроить систему сетки Boostrap, чтобы иметь 8 столбцов вместо 12. Вы также можете перестроить и настроить фреймворк на их сайт здесь

Если вы не хотите изменять сетку, и вы хотите, чтобы даже центрированные столбцы вы могли работать со смещением

<!-- First line has the offset -->
<div class="col-md-offset-2 col-md-2">

1

Источник

Accepted Answer

Вы должны отредактировать свой шаблон, чтобы создать что-то вроде этого:

<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>

В основном это 12 сеток, которые делятся пополам, затем эти половины делятся на 12 сеток и делятся на 4, что в итоге приводит к столбцу 8 сеток. Вы не можете сделать это с вашим решением, потому что вы не можете разделить 12, чтобы стать 4 равными частями (это будет что-то вроде col-md-1,5, и вы, очевидно, не можете сделать что-то подобное в начальной загрузке)

источник: 8 столбцов в Twitter Bootstrap

ОБНОВИТЬ:
Это не так просто, как копировать этот код куда-нибудь, вам придется изменить код во многих местах. Возможно, мы можем попробовать более «грязный» подход. Попробуй это:

Вставьте этот код в конец вашего файла .css:

.col-8-custom{
width: 12.5%;
}

И измените код, который вы изначально вставили:

switch ( $BoxCount ):
case $BoxCount == 8:
$BoxClass = 'col-8-custom';

break;

default:
$BoxClass = 'col-md-3';
endswitch;

4