使用Bootstrap均勻分布跨度

Question

我正在與一個流體響應式引導項目一起工作。 我有四個跨度； 我的目標是向他們展示4x1，然后是2x2，然后是1x4。 我在不進行3x1 + 1轉換的情況下遇到了麻煩。

以圖形方式顯示：

我發現的唯一有效的代碼如下： 在4x1布局中，它在第2項和第3項之間留有很大的空間。

<div class="container-fluid">
    <div class="span11">
        <div class="span5">
            <h2>Item 1</h2>
        </div>
        <div class="span5">
            <h2>Item 2</h2>
        </div>
    </div>
    <div class="span11">
        <div class="span5">
            <h2>Item 3</h2>
        </div>
        <div class="span5">
            <h2>Item 4</h2>
        </div>
    </div>
</div>

Answer 1

默認引導網格為12列。 您自定義了嗎？ 如果是這樣，請共享該代碼。 即使您確實進行了自定義並使用了11列網格（這似乎是個壞主意），您也只能在11列容器中使用將10加起來的跨度。

在引導程序的流體網格中，這是嵌套跨度的正確方法：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span6"></div>
                <div class="span6"></div>
            </div>
        </div>
    </div>
</div>

關鍵是當您嵌套時，需要打開一個新的行流體div。 在您的情況下，如果您只關心這兩個框，則可以只從第一個行流體div開始執行那些.spans，甚至不指定全部量的span類。 另外，請記住使每行上的內部跨度類的總和等於列的總數

Answer 2

我只是為此創建一個自定義網格大小。 如果您熟悉LESS，則可以編輯grid.less文件或添加以下內容：

.col-quarter {
  width: 25%;
  float: left;
}
.col-half {
 width: 50%;
 float:left;
}
.col-third {
 width: 33%;
 float:left;
}

這不考慮任何填充和邊距，而是起點。