Bootstrap列在行和容器內部保持均衡

因此，我使用Bootstrap 3和一些LESS mixins構建了一個網頁。Bootstrap列在行和容器內部保持均衡

每當我嘗試製作兩列布局時，比如說使用.make-sm-column(4);和.make-sm-column(8);，右列總是會溢出到下一行。

據我所知，要計入padding-left和padding-right的15px，您需要將行放在一行內，並將該行放在容器內。在基本層面上，少我使用看起來像：

.container { 
    .container(); 
    //... 

    .content { 
    .make-row(); 

    .col1 { 
     .make-md-column(8); 
    } 

    .col2 { 
     .make-md-column(4); 
    } 
    } 
}

然而，出於某種原因，列似乎太寬的容器，打破了。有什麼明顯的，我想念我看不到？我現在唯一的解決辦法是刪除padding-left/right，但這很不方便，當然，刪除這個排水溝並不會讓兩個柱子看起來很乾淨，不需要我做任何額外的工作。

來源

2016-04-22 Zach

您是否檢查過瀏覽器控制檯以查看應用了哪些CSS規則？對於bootstrap，有'{float：left; }'for'col-md- *' - 是否有一個用於'.col1，.col2'？ – Kenney

@肯尼，是的，'.col1'的造型是：'float：left;寬度：66.66666667％;位置：相對; min-height：1px; padding-left：15px; padding-right：15px;''而'.col2'除了'width'外都是'33.33333333％' – Zach

當你刪除填充它得到修復？

它必須是盒子大小的問題。填充使列大於指定的寬度。將該屬性更改爲： box-sizing: border-box;並且應該這樣做。

來源

2016-04-22 19:28:44 Vaxes

就像一個魅力！謝謝。 – Zach

Bootstrap列在行和容器內部保持均衡

回答

相關問題