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

来源：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">