html - Bootstrap 网格居中不起作用

标签 html css twitter-bootstrap twitter-bootstrap-3

<分区>

当分辨率随 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>

网格在大型和智能手机上完美运行,一切都居中,但在平板电脑分辨率上,当最后一列在前两列下方时,它会粘在左边。

example

我尝试使用 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/

上一篇:CSS - 如何在 css 样式居中图像下方显示文本?

下一篇:css - ValidationSummary 错误消息不响应样式文本对齐 :left

相关文章:

javascript - 根据另一个div的文本内容更改div的底部边框

jquery 显示是否来自特定链接

twitter-bootstrap - Angularjs 和 twitter bootstrap - 每行创建 X 个项目

javascript - Bootstrap 模态显示但没有文本可见

javascript - meteor 迭代一组 session 以检查值是否已更改

html - 奇怪的黑边 :after css arrow in Firefox

javascript - 以固定尺寸 60x60 显示部分图像(未知宽度和高度)

javascript - 围绕轴旋转 css 元素

html - 如何更改 css sprite 图像的位置?

Javascript 替换函数用于在 HTML 中的字符串周围添加标记标签