html – 为什么引导网格列包装

2023年6月6日 150次阅读

参见英文答案 >
Bootstrap xs columns wrap                                    2个

当在浏览器中查看下面的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>

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

这种意外行为是因为默认情况下Bootstrap列的左侧和右侧填充为15px.这是你必须考虑的非缩放,不可用空间的总共30px.这意味着在缩小超过某个屏幕宽度后,此最小值30px可能超过该元素应占用的分配宽度(屏幕的1/12).

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

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

希望这可以帮助！如果您有任何疑问,请告诉我.

点赞