<分区>
<分区>
当分辨率随 bootstrap 发生变化时,我无法将网格列居中。这是有罪的代码:
<div class="container-fluid container-reasons">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 text-center padding">
<img src="//####/wp-content/uploads/theme-images/reasonHeart.png" width="50px" height="46px" />
<h2>Lorem Ipsum 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center padding">
<img src="//####/wp-content/uploads/theme-images/reasonHeart.png" width="50px" height="46px" />
<h2>Lorem Ipsum 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center padding">
<img src="//####/wp-content/uploads/theme-images/reasonHeart.png" width="50px" height="46px" />
<h2>Lorem Ipsum 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 center-block text-center enroll-form-link-homepage">
<form action="http://###/index.php/inscriete/">
<input type="submit" id="enroll-button" value="Inregistreaza-te la Oriflame" />
</form>
</div>
</div>
</div>
网格在大型和智能手机上完美运行,一切都居中,但在平板电脑分辨率上,当最后一列在前两列下方时,它会粘在左边。
我尝试使用 col-*-offset-*
、mx-auto
offset-*-*
但都不起作用。
任何人都可以给我一个提示吗?
最佳答案
将 col-sm-push-3
添加到您的最后一个 div,这将为您将其居中......包含 Lorem Ipsum 3 的那个。同时添加 col-md-push- 0
因此它会重置更大断点的推送。
关于html - Bootstrap 网格居中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49806911/