Bootstrap网格居中不起作用

时间:2018-04-12 22:45:36

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

当分辨率随引导程序发生变化时,我无法将网格列居中。这是有罪的代码:

<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-*-*但没有效果。 有人可以给我一个提示吗?

1 个答案:

答案 0 :(得分:0)

col-sm-push-3添加到您的上一个div中,它会为您设置中心...包含Lorem Ipsum 3.还添加col-md-push-0,以便重置较大断点的推送。