帶4列的Bootstrap網格系統

我正在嘗試使用自舉網格創建網站。在那裏，我有一個行裏面我有4列是這樣的：帶4列的Bootstrap網格系統

<body> 

    <div class='container-fluid'> 

    <div class='row'> 

     <div class='col-xs-9'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

    </div> 
    </div> 
</body>

我預計該列不會在小屏幕寬度的突破。但在小型設備中，最後一列打破了行。這是預計還是我錯過了什麼？

Plunker鏈接：https://plnkr.co/edit/e9PXa97nnQaBSqXVVbHh?p=preview

來源

2017-05-14 JmRag

您在這裏對付引導柱填充。

注意引導CSS狀態：

.col-xs-1 { 
    [ ... ] 
    padding-right: 15px; 
    padding-left: 15px 
}

而且還增加了財產

border: 1px solid grey;

所以，無論你做什麼，你div總是會有(2 * 15 + 2 * 1) = 32px最低水平維度。您可以在瀏覽器檢查器中看到，div的實際內部寬度在某個時間點爲0。

修復是非常明顯的然後：刪除填充或添加一個負邊距，就像row類一樣，並將替換爲outline，這樣即使擠出最後一個像素。

編輯：輪廓部分是一種矯枉過正。刪除填充應該沒問題。

來源

2017-05-14 11:56:39

帶4列的Bootstrap網格系統

回答

相關問題