php - 如何在具有 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 并且你显然不能在 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;