为什么引导程序网格列换行

当在浏览器中查看下面的HTML代码段时，第一行的最后一列会被封装，但是当浏览器宽度减小时，第二行中的列都不会被封装。我的印象是，如果使用col-xs- *类，列不会叠加起来。我需要做什么以确保第一行的最后一列不会换行？为什么引导程序网格列换行

<!DOCTYPE html> 
<html> 
<head> 
<link data-require="[email protected]" data-semver="3.3.6" 
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
</head> 

<body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-1"> 
       a 
      </div> 
      <div class="col-xs-10"> 
       bbb 
      </div> 
      <div class="col-xs-1"> 
       c 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-2"> 
       a 
      </div> 
      <div class="col-xs-8"> 
       bbb 
      </div> 
      <div class="col-xs-2"> 
       c 
      </div> 
     </div> 
    </div> 
    </body> 
</html>

来源

2016-07-29 Kiran Ferns

我可以在调整窗口大小的时候获得第二行的最后一列（以令人难以置信的精简）。你想做什么？当它没有足够的空间或简单地将其从页面上切下时，将该列放在新行上 - 有效地隐藏列？ – Shane

这是因为第一列含有“a”超过所述视口的宽度的1/12一旦缩放屏幕下降到一个特定的宽度，尽管它被指定为.col-xs-1。

这种意外行为是因为默认情况下Bootstrap列的左侧和右侧的padding为15px。在不缩放的情况下，总共需要30px，您必须考虑到不可用的空间。这意味着在缩小超过某个屏幕宽度后，这个最小值为30px的值可能会超过元素应占用的分配宽度（屏幕的1/12）。

快速计算表明，这将发生在30px * 12 = 360px的屏幕宽度之后。在此之后，元素占用屏幕的1/12以上，这会将.row末尾的元素下推到下一行，因为没有足够的空间将所有元素放在同一行上。

我的建议？请勿像这样使用.col-xs-1。要么在xs/sm断点处指定一些重新分布的列数（以便给这些元素更多的水平空间），或者从一开始就给它多于一列的空间。

希望这会有所帮助！如果您有任何问题，请告诉我。

来源

2016-07-29 18:23:08 Serlite

为什么引导程序网格列换行

回答

相关问题