Bootstrap сетка не выравнивается по центру проблема

Question

Я использую загрузочную библиотеку. Итак, я пытался создать три сетки при создании веб-сайта. Это отзывчиво, но недостаточно. И я не могу центрировать выравнивание сетки. Но вручную это можно сделать с помощью настроенного класса или идентификатора. Для примера предположит, что я хотел бы получить представление для просмотра таблетки ... сетки приходит, как это ... 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> 

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>