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.
我的网格中的第三个元素没有向左侧突破,而是向右侧突破。我相信这是因为列的高度不同。我不能简单地附加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>
1 个解决方案
#1
2
Have you tried applying a .clearfix
every 2 col-sm-6
(full 12 columns row) elements:
您是否尝试过每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>
#1
2
Have you tried applying a .clearfix
every 2 col-sm-6
(full 12 columns row) elements:
您是否尝试过每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>