为什么引导网格不正确地堆叠这些元素？答案

【问题标题】：Why does bootstrap grid improperly stack these elements?为什么引导网格不正确地堆叠这些元素？
【发布时间】：2016-12-31 18:25:56
【问题描述】：

我的网格中的第三个元素没有向左侧中断，而是向右中断。我相信这是因为列的高度不同。我不能简单地附加 2 行，因为代码的构建方式应该显示为 1x4、2x2，然后是 4x1。我不想通过 javascript 或 css 根据屏幕大小来显示和隐藏行，因为我宁愿让网格系统按应有的方式工作。附上我的代码示例供参考。

        <div class="container-fluid" style="background-color: ">
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Better Customer Relationships</p>
                <p class="text">Personalized emails connect you with your customers.</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Set it and Forget It</p>
                <p class="text">Set up a Jaynote campaign once, and automatically engage with every customer.</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Easy to Use</p>
                <p class="text">Simple management panel shows you exactly what to do.</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Guaranteed Results</p>
                <p class="text">90 Day money-back guarantee if you are not completely satisfied with your results.</p>
            </div>
        </div>
    </div>

【问题讨论】：

我能想到 2 个您可以尝试的解决方案。 1 使用引导程序 4，因为它使用弹性容器，这样的事情应该得到修复。 2 使用不可见的
或类似的东西使高度相等。

标签： html css twitter-bootstrap grid-system

【解决方案1】：

您是否尝试过每 2 个 col-sm-6（整行 12 列）元素应用一个 .clearfix：

<div class="col-md-3 col-sm-6" style="background-color: red;">
    <div class="feature-box">
        <div class="feature-item"></div>
        <p class="sub-title">Better Customer Relationships</p>
        <p class="text">Personalized emails connect you with your customers.</p>
    </div>
</div>
<div class="col-md-3 col-sm-6" style="background-color: red;">
    <div class="feature-box">
        <div class="feature-item"></div>
        <p class="sub-title">Set it and Forget It</p>
        <p class="text">Set up a Jaynote campaign once, and automatically engage with every customer.</p>
    </div>
</div>
<!-- apply clearfix -->
<div class="clearfix"></div>

【讨论】：

我应用了这个，在大窗口尺寸下，它创建了一个 4x4，看起来像是 col-6。我将继续尝试这个明确的解决方案，直到我可以开始工作为止。
设置它显示：使用@media查询仅在sm断点（≥768px）上阻止。
在你写这篇文章之前我就是这么做的。不想诉诸媒体查询，但为什么不呢。