Html Twitter引导中的8列

如何在最新版本的Twitter引导中设置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 -->

我可以通过执行以下操作创建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>

---

正如BenM在上文中所说，Bootstrap使用12列网格系统，它不会干净地划分为8个相等的列

---

如果您绝对需要8列，则可能值得检查，甚至。

我遇到了同样的问题，选择了4列，每列包含2个嵌套列。

在引导样式表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>

---

您可以按照以下步骤在引导中实现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 -->

1.
2.
3.
4.
5.
6.
7.
8.

我知道这是一个非常古老的主题，但它是这个问题的最佳搜索结果，因此我希望我能给出一个比这里提供的任何当前选项都好的答案

在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列的布局，你可以使用长得离谱的
宽度：14.28571428571429%
来代替这4个实例，把你的类名改为
.col-*-7r
，然后你可以把类名放在你想要的任何地方。
对于8列网格，你不必自定义css或html

只需创建或复制以下内容：



1.
2.
3.
4.
5.
6.
7.
8.

制造

日产

模型

头饰-5

发动机号

102354
底盘号

2114-14

div>
制造年份

2016年

座位

5
体型

轿车

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

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

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