Bootstrap网格未居中对齐问题

Question

我正在使用bootstrap库。在建立网站时，我试图创建三个网格。虽然它是响应式的，但并不够好。而且我无法将网格居中对齐。但是，可以通过自定义类或ID手动完成。 例如，假设我想要在平板电视视图中查看... 网格显示如下... 这就是它的显示方式。 网格显示五年没有足够地居中。 这看起来很奇怪。 如何使“5years”网格在平板电视视图中居中？

我在此附上我的代码。

       <!-- Here are all THREE COLUMNS which says about YEARS GRID  -->
<!-- 1st -->
<div class="row text-center center" id="alignment-margin">

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      3 years
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
  <!-- SECOND -->
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      1 year
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
  <!-- THIRD -->
  <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12 col-tn-12 container" id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
      5 years
      <br/>
      <hr id="small-line">
    </h3>
    <p>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
      <i class="fa fa-check" id="icon_color">
        &nbsp
      </i>
      interdum et malesuada
      <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
      Try it now for free
    </button>
  </div>
</div>

- Saiyaff Farouk

---

你期望的行为是什么？在我看来，它看起来还不错。https://jsfiddle.net/gv8bfokm/ - ketan

我看到左边距比右边距大，我认为这是因为你在列中有一个.container类。但如果你能把你的代码变成一个可工作的示例，我可以再次检查它。 - miguelmpn

Answer 1

我找到了这个问题的解决方案，但无法更新。因为Bootstrap有自己的类来显示网格，所以我们必须根据我们的要求自定义这些类。 问题在于如何使其响应式。 当然应该使用媒体查询。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

- Saiyaff Farouk

Answer 2

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        FIRST BLOCK
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        SECOND BLOCK
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        THIRD BLOCK
    </div>
  </div>
</div>

- Amir

Answer 3

你可以使用偏移量来实现。这是在列显示之前的一些额外空间。在你的示例中，你想要居中一个具有类col-md-4的列。

总共有12列，所以为了使你的5年块居中，我们需要一个4列的偏移量。

将以下类添加到最后一个块中，仅适用于小型设备：

col-sm-offset-3 col-md-offset-0

现在顶部的列没有居中对齐。你可以在那里使用偏移量，或者调整宽度。根据下面你代码的示例，我已经调整了宽度。有关偏移类的更多信息可以在这里找到。

这是你想要的：

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
        3 years
        <br/>
        <hr id="small-line">
    </h3>
    <p>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
        Try it now for free
    </button>
</div>
<!-- SECOND -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-tn-12 container " id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
        1 year
        <br/>
        <hr id="small-line">
    </h3>
    <p>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
    </p>
    <button class="btn btn-success rounded" id="tryButton" type="button">
        Try it now for free
    </button>
</div>
<!-- THIRD -->
<div class="col-lg-4 col-md-4 col-sm-6 col-sm-offset-3 col-md-offset-0  col-xs-12 col-tn-12 container" id="section-customization" id="alignment-margin">
    <h3 id="pricing-font">
        5 years
        <br/>
        <hr id="small-line">
    </h3>
    <p>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
        <i class="fa fa-check" id="icon_color">
            &nbsp
        </i>
        interdum et malesuada
        <br/><br/>
    </p>
    <button class="btn btn-success rounded customize-button" id="tryButton" type="button">
        Try it now for free
    </button>
</div>

希望这就是您想要实现的。

- Bart Roelofs