引導程序網格不居中對齊問題

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>

什麼