为什么Bootstrap网格列会换行？

Question

为什么Bootstrap网格列会换行？

4

当下面的HTML片段在浏览器中查看时，第一行的最后一列会被换行，但是当浏览器宽度缩小时，第二行的任何列都不会被换行。我原本以为如果使用col-xs-*类，列就不会堆叠。我需要做什么来确保第一行的最后一列不换行？

<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.6" 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>

- Kiran Ferns

当我调整窗口大小（变得非常狭窄）时，我能够使第二行的最后一列换行。您更希望它做什么？当没有足够的空间时，将该列放在新行上还是直接将其从页面中剪切掉 - 有效地隐藏该列？ - Shane

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Serlite · Accepted Answer

这是因为当你将屏幕缩小到特定宽度时，包含“a”的第一列超过了视口宽度的1/12，即使它被指定为.col-xs-1。

这种意外行为是由于Bootstrap列默认在左右两侧具有15px的填充。这是非缩放、不可用空间中总共的30px，你必须考虑到这点。这意味着在缩小至一定屏幕宽度后，此最小30px可能会超出元素应占用的分配宽度（屏幕的1/12）。

一个快速的计算表明，在30px * 12 = 360px的屏幕宽度之后，这种情况会发生。在此之后，元素占用的空间超过了屏幕的1/12，导致该元素位于.row末尾并跳到下一行，因为没有足够的空间将所有元素放在同一行上。

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