Question

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

在查看平板电脑视图时，将“5年”网格移动到中心的方法是什么。

我在这里附上我的代码。

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

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

希望这是你想要完成的事情

Answer 2

＆＃13;

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

＆＃13;

Answer 3

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

Bootstrap网格不是中心对齐问题

3 个答案: