具有不等列数的引导网格答案

【问题标题】：Bootstrap grid with unequal col numbers具有不等列数的引导网格
【发布时间】：2015-10-20 05:27:13
【问题描述】：

我想使用 bootstrap 3 创建一个网格，以创建如下内容：

我正在使用框来创建正方形，并且框的使用类似于链接。这应该用作定制的导航栏。

有什么建议吗？

【问题讨论】：

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

您可能正在寻找这样的东西：https://jsfiddle.net/DTcHh/13320/

使用 12 列网格，我将两个外部按钮变小，方法是给它们一个 1 值和中间一个 10 然后在 10 列内的 divs 我给它们每个一个 4 3x4 = 12 并且在 boostrap 中是 100% 的父级。

<div class="container">
    <div class="row" style="border-style: solid; border-color: blue;">
        <div class="col-xs-1">
             <h3 style="border-style: solid; border-color: red;"><</h3>

        </div>
        <div class="col-xs-10">
            <div class="col-xs-4">
             <h3 style="border-style: solid; border-color: green;">X</h3>
            </div>
            <div class="col-xs-4">
             <h3 style="border-style: solid; border-color: green;">X</h3>
            </div>
            <div class="col-xs-4">
             <h3 style="border-style: solid; border-color: green;">X</h3>
            </div>

        </div>
        <div class="col-xs-1">
             <h3 style="border-style: solid; border-color: red;">></h3> 
        </div>
    </div>
</div>

【讨论】：

@AHJ 如果这就是你所需要的，你能把它标记为正确吗？这样，其他人就不会认为您的问题仍然需要回答。