为什么引导网格不正确地堆叠这些元素？ [英] Why does bootstrap grid improperly stack these elements?

问题描述

网格中的第三个元素不会向左侧折断，而是向右侧折断。我相信这是因为列的高度不一样。我不能简单地附加2行，因为代码的构建方式，它应该显示为1x4，2x2，然后4x1。我不想诉诸显示和隐藏行，取决于屏幕大小通过javascript或css，因为我宁愿网格系统工作的方式，它应该。附加的是我的代码示例。

The third element in my grid is not breaking to the left side, instead it is breaking to the right. I believe this is because the columns are not the same height. I cannot simply attach 2 rows because the way the code is built, it should appear as 1x4, 2x2, then 4x1. I do not want to resort to showing and hiding rows depending on the screen size through javascript or css because I would rather have the grid system work the way it should. Attached is a sample of my code for reference.

        <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>

推荐答案

您是否尝试过 .clearfix 每2 col-sm-6 （全12列row）元素：

Have you tried applying a .clearfix every 2 col-sm-6 (full 12 columns row) elements:

<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>

这篇关于为什么引导网格不正确地堆叠这些元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！