Bootstrap col-xs- *無法正常工作

有人可以幫我弄清楚我的移動版本的頁面發生了什麼？我正在從getbootstrap.com修改儀表板示例。我想修改其中一個主行的移動版本，以顯示每行三個div。Bootstrap col-xs- *無法正常工作

   <div class="row placeholders"> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Active Users</h4> 
         <span class="text-muted">Total Active Users</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Items</h4> 
         <span class="text-muted">Items in Database</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
       </div>

的col-xs通常是在模板col-xs-6，共四列的，當你在移動瀏覽這會增加24所以，它顯示了兩個各行（自24被分成兩行12）。奇怪的部分是，我已將它改爲col-xs-4，總共六列，我想在移動設備上顯示爲兩行三列。但是當我在移動設備上查看時，第一行是3，但第二行的第一列自己被推到第三行。這是爲什麼發生？

來源

2017-02-16 Max

這主要是由於其中一個col-sm-4列的高度與其他高度不同（大）。您可以通過在行之間添加clearfix div或通過確保三列具有相同大小（高度方向）來解決此問題。

我個人的建議是通過javascript來完成。計算所有列的最大高度並將該高度分配給所有列。但是如果你只是想要一個CSS解決方案，你可以考慮設置max-height列

來源

2017-02-16 06:59:06

Bootstrap col-xs- *無法正常工作

回答

相關問題