具有不等col编号的Bootstrap网格

Question

我想使用bootstrap 3创建一个网格，以创建这样的东西：

我正在使用框来创建正方形，并且该框用作链接。 这应该用作自定义导航栏。

有什么建议吗？

Answer 1

您可能正在寻找类似这样的内容：https://jsfiddle.net/DTcHh/13320/

使用12列网格，我将两个外部按钮设为1，中间为10，divs列为10我给他们每人一个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>