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-东西在我在断点处向下移动时不允许我调整大小.

例如,当前接受的答案正确地指出你不能用默认的bootstrap做到这一点,但是下一个答案表明你嵌套.col-xs-3在.col-xs-6我的内部并且我假设很多人来这里使用它因为这是您在谷歌搜索的第一页中可以找到的唯一可行的答案.

如果我想在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

将这样的样式添加到bootstrap样式表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>

Answer 4

我遇到了同样的问题,并且有4列,每列包含2个嵌套列.