Question

抱歉，我是PHP和CSS的新手......

我正在尝试更改Evolve（WordPress）主题，使其在首页上显示8列，但由于此主题使用带有12个网格系统的Bootstrap，我无法创建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列？（有无间隙）？

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

它基本上将12个网格布局切成两半，然后将这些半部分制成12个网格布局并除以4，最终得到8个网格列。你不能用你的解决方案做到这一点，因为你不能将12分成4个相等的部分（它会像col-md-1,5那样你显然不能在bootstrap中做出类似的东西）

来源：8 Columns in 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;

Answer 2

欢迎使用堆栈溢出。

Bootstrap和它的网格与php无关，它全部在css和更少的文件中。现在你可能没有更少的文件，但你可以自定义boostrap网格系统有8列而不是12列。你也可以在website here上重建和自定义框架

如果你不想修改网格，你甚至想要居中的列，你可以使用偏移量

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

如何在Bootstrap中创建具有12个网格系统的8列？

2 个答案: