引导程序网格不居中对齐问题

Question

我正在使用引导程序库。所以，我正在尝试在建立网站的同时创建三个网格。它的响应速度很快，但还不够。我无法居中对齐网格。但是，手动可以使用自定义的类或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

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

Answer 2

您可以使用一个偏移量。在列显示之前，这是一些额外的空间。在你的例子中，你想要将一个列与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 3

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

什么