Извините, я новичок в 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 столбцов подряд? (с зазором или без него)?
Вы должны отредактировать свой шаблон, чтобы создать что-то вроде этого:
<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;
Добро пожаловать в переполнение стека.
Bootstrap и его сетка не имеют ничего общего с PHP, хотя, все это в файлах CSS и меньше. Теперь у вас не может быть меньше файлов, но в противном случае вы можете настроить систему сетки Boostrap, чтобы иметь 8 столбцов вместо 12. Вы также можете перестроить и настроить фреймворк на их сайт здесь
Если вы не хотите изменять сетку, и вы хотите, чтобы даже центрированные столбцы вы могли работать со смещением
<!-- First line has the offset -->
<div class="col-md-offset-2 col-md-2">