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

Question

抱歉，我是 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 列连续？（有或没有间隙）？

Answer 1

欢迎来到堆栈溢出。

Bootstrap 虽然它的网格与 php 无关，但它都在 css 和 less 文件中。现在你可能没有任何更少的文件，但否则你可以自定义 boostrap 网格系统，使其具有 8 列而不是 12 列。你还可以在 website here

上重建和自定义框架

如果您不想修改网格并且想要居中的列，您可以使用偏移量

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

Answer 2

您必须编辑模板才能生成如下内容：

<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

更新：这不像将这段代码复制粘贴到某个地方那么容易，您必须在很多地方修改代码。我们也许可以尝试更多 "dirty" 方法。试试这个：

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

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

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

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

            break;

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

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

How to create 8 columns in Bootstrap that has 12 grid system?

php

wordpress

bootstrapping