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，但第二行的第一列自己被推到第三行。这是为什么发生？

答

这主要是由于其中一个col-sm-4列的高度与其他高度不同（大）。您可以通过在行之间添加clearfix div或通过确保三列具有相同大小（高度方向）来解决此问题。

我个人的建议是通过javascript来完成。计算所有列的最大高度并将该高度分配给所有列。但是如果你只是想要一个CSS解决方案，你可以考虑设置max-height列

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

相关推荐