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

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 并且你显然不能在引导程序中做这样的事情）

来源：Twitter Bootstrap 中的 8 列

更新：这不像在某处复制粘贴此代码那么容易，您必须在许多地方修改代码。我们也许可以尝试更“脏”的方法。尝试这个：

将此代码粘贴到 .css 文件的末尾：

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

并更改您最初粘贴的代码：

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

            break;

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