Twitter Bootstrap中的8列

Question

如何在最新版本的Twitter bootstrap中设置8个相等的列。

我可以通过执行以下操作来创建4个相等的列，但我不知道如何获得8个：

    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
        </div>
    </div>

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>

Answer 2

我知道这是一个相当古老的话题，但它是这个问题的最高搜索结果，所以我希望我能给出一个我认为比这里提供的任何当前选项都更好的答案。

在n列布局中，我不希望在向下移动断点时，不得不欺骗一些不允许我调整大小的奇怪的.row .col-内容。

例如，这里目前公认的答案正确地指出，你不能用默认引导程序做到这一点，但下一个答案建议你在.col-xs-6中嵌入.col-xs-3，我想很多来这里的人都在使用它，因为这是你在谷歌搜索的第一个页面中唯一可行的答案。

如果我想要在lg断点上显示8列，然后在平板电脑上显示4列，在移动设备上显示2列，该怎么办？这个答案不会优雅地降级。这个方法会的，而且它非常容易实现。

首先，将此代码添加到CSS文件中：

.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-8r {
    width: 12.5%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-8r {
        width: 12.5%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-8r {
        width: 12.5%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-8r {
        width: 12.5%;
        float: left;
    }
}

接下来，将col-*-8r添加到列中，如下所示：

<div class="row">
    <div class="col-xs-4 col-sm-3 col-md-8r">
        ...
    </div>
</div>

现在，您有了一个可以在所有断点上工作的8列布局。

这种方法很酷的一点是，如果您需要一些奇数列，则可以很容易地将其扩展。您只需将100除以所需的列数，然后使用该数字代替上面代码中width: 12.5%;的4个实例(显然，不要忘记将类名更新为您正在使用的任何数字)。

例如，如果你需要一个7列的布局，你可以用长得离谱的width: 14.28571428571429%代替这4个实例，把你的类名改为.col-*-7r，然后你可以把这个类名放在你想放的任何地方。

Answer 3

将类似这样的样式添加到引导样式表style.css中：

.col-8{
width: 12.5%;
}

然后将其添加到您的html中。

<div class="row">
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
</div>