引导网格不是中心对齐问题答案

【问题标题】：Bootstrap grid is not center aligned issue引导网格不是中心对齐问题
【发布时间】：2016-06-15 16:06:28
【问题描述】：

我正在使用引导库。因此，我在构建网站时尝试制作三个网格。它反应灵敏，但还不够。而且我无法将网格居中对齐。但是，可以使用自定义类或 ID 手动完成。例如，假设我想获取平板电脑视图的视图... 网格是这样来的…… This is how it shows. The grid shows five years is not centered enough. it's giving an odd look.

当查看平板电脑视图时，如何将“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>

【问题讨论】：

您的预期行为是什么？我觉得没问题。 jsfiddle.net/gv8bfokm
我看到左边距大于右边距，我相信这是因为你的列中有一个.container 类。但是如果你能把你的代码变成一个工作示例，我可以再检查一次..

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

【解决方案1】：

您可以为此使用偏移量。这是显示列之前的一些额外空间。在您的示例中，您希望使用 col-md-4 类将列居中。

总共有 12 列，因此要使您的 5 年块居中，我们需要 4 列偏移量。

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

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

顶部的列现在没有居中。您也可以在那里使用偏移量，或者您可以调整宽度。通过下面的代码示例，我调整了宽度。有关偏移分类的更多信息可以找到here

这是您想要的：

<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>

希望这是你想要完成的目标

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我找到了解决方案。但无法更新。由于引导程序有自己的类来显示网格，我们必须根据我们的要求自定义类。问题的问题在于，使其具有响应性。当然应该使用媒体查询。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：