Bootstrap Grid留下空列[重复]答案

【问题标题】：Bootstrap Grid leaving empty columns [duplicate]Bootstrap Grid留下空列[重复]
【发布时间】：2017-04-06 08:13:55
【问题描述】：

我正在使用引导程序来实现网格系统。调整页面大小时，网格会正确响应，但在加载屏幕时，网格会遗漏或跳过列。

Error Screenshot

它们的空白点取决于屏幕尺寸。

<div class="row rowmain">
        <div class="col-md-9 col-xs-12 maincol">
                <!--new button-->

                <div class="col-lg-2 col-sm-3 col-xs-6">
                <div class="square">
                    <a target="_blank" href=""><button type="button" class="buttonlink">link</button></a>
                </div>

当我刷新页面或调整窗口大小时，网格系统会重置自身并正确显示。我没有对 CSS 做任何聪明的事情，它的标准引导程序。所有盒子的尺寸都一样。

希望有人知道为什么会这样吗？

更新 * JSFiddle https://jsfiddle.net/hrx6c2b7/

【问题讨论】：

你读过lg、md、sm和xs的区别吗？如果您发布整个代码会更好
@Tesseract 谢谢，我已经阅读了网格系统。我希望它在 lrg 屏幕或更大屏幕上显示 6 个，在 sm 屏幕上显示 4 个，在 xs 屏幕上显示 2 个。这工作正常。代码差别不大。有很多方法可以把它放到网上吗？
只需发布代表您的屏幕截图的代码
并删除不必要的元素
@Tesseract 我发布了一个带有 JSFiddle 链接的更新。我的 HTML 和 CSS 都在顶部。

标签： html css twitter-bootstrap grid

【解决方案1】：

您已将按钮包含在这样的行中

<div class="row">
 <div class="col-lg-2 col-sm-3 col-xs-6">
 <div class="square">
   <a target="_blank" href=""><button type="button" class="buttonlink">link</button></a>
 </div>
....
....
....
</div>

【讨论】：

这有什么问题吗？