引導網格為什么會不正確地堆疊這些元素？

Question

我網格中的第三個元素不是在左側斷開，而是在右側斷開。 我相信這是因為列的高度不同。 我不能簡單地附加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>

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