为什么引导网格列换行[重复]答案

【问题标题】：Why does the bootstrap grid column wrap [duplicate]为什么引导网格列换行[重复]
【发布时间】：2016-12-04 12:44:19
【问题描述】：

当在浏览器中查看下面的 HTML sn-p 时，第一行的最后一列被换行，但是当浏览器宽度减小时，第二行中的所有列都没有被换行。我的印象是，如果使用 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>

【问题讨论】：

我可以在调整窗口大小时将第二行的最后一列换行（变得非常薄）。你宁愿让它做什么？在没有足够空间时将列放在新行上，或者干脆将其从页面上剪掉 - 有效地隐藏列？

标签： html css twitter-bootstrap

【解决方案1】：

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

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

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

我的建议？不要像这样使用.col-xs-1。要么在 xs/sm 断点处指定一些重新分配的列数（因此这些元素被赋予更多的水平空间），或者从一开始就给它超过 1 列的空间。

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

【讨论】：