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-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

在引导样式表 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 个嵌套列。

Answer 5

对于 8 列网格，您不必自定义 css 或 html。

只需创建或复制这个：

<div class="col-md-6">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">4</div>
    </div>
    
    
    <div class="col-md-6">
        <div class="col-md-3">5</div>
        <div class="col-md-3">6</div>
        <div class="col-md-3">7</div>
        <div class="col-md-3">8</div>
    </div>

Answer 6

<div class="row">
    <div class="col-xs-6 col-md-6 col-sm-6">
        <div class="row">
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Make</b></p>
                    <p class="marginTop20">Nissan</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Model</b></p>
                    <p class="marginTop20">Tiara-5</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Engine no</b></p>
                    <p class="marginTop20">102354</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Chassis no</b></p>
                    <p class="marginTop20">2114-14</p>
                </div>
            div>
        </div>
    </div> 
    <div class="col-xs-6 col-md-6 col-sm-6">
        <div class="row">
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Mfg Year</b></p>
                    <p class="marginTop20">2016</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Seats</b></p>
                    <p class="marginTop20">5</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Body Type</b></p>
                    <p class="marginTop20">Sedan</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div>
                    <p><b>CC</b></p>
                    <p class="marginTop20">3900</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 7

2020 年更新 - 引导程序 4

这个问题非常适用于 Bootstrap，但现在接受的答案已经过时了。

获得8个相等列的简单方法是使用auto-layout columns...

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
    </div>
</div>

https://codeply.com/p/ds99xlkSGa

Answer 8

正如 BenM 上面所说，Bootstrap 使用 12 列网格系统，它不会干净地分成 8 个相等的列。

如果您绝对需要 8 列，则可能值得查看 this，甚至是 rolling your own。

Answer 9

你可以按照这个步骤在bootstrap中实现8列。

<!-- 8 Column -->
<div class="8-column">
    <!-- Container -->
    <div class="container">
        <!-- Parent row -->
        <div class="row">
            <!-- 1st parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /1st parent column -->
            <!-- 2nd parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /2nd parent column -->
            <!-- 3rd parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /3rd parent column -->
            <!-- 4th parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /4th parent column -->
        </div>
        <!-- /Parent row -->
    </div>
    <!-- /Container -->
</div>
<!-- /8 Column -->

Answer 10

解决此问题的最佳方法是创建表并使用vw 划分部分，然后在其中使用引导网格。

我的例子是我想将布局分成 63:37 的比例，然后再次将第一部分分成 3 部分，将第二部分分成两部分。

所以我创建了两列宽度为63vw 和37vw 的表格，然后分别在其中使用引导网格。

<div class="row">
<table id="main_table" style="width: 100%;height: 100%" cellspacing="0">
    <tr style="width: 100%; position: relative">
        <td id="donut1" style="width: 63vw;">
            <div class="row">
                <div class="col-sm-4">
                    Loading
                </div>
                <div class="col-sm-4">
                    Loading
                </div>
                <div class="col-sm-4">
                    Loading
                </div>
            </div>
        </td>
        <td id="donut1" style="width: 37vw;">
            <div class="row">
                <div class="col-sm-6">
                    Loading
                </div>
                <div class="col-sm-6">
                    Loading
                </div>
            </div>
        </td>
    </tr>
</table>