Как центрировать выравнивание столбцов, вложенных в столбец

Question

Устранение проблем, выравнивающих эти столбцы внутри столбца раздела.

Вот скриншот того, что происходит: https://gyazo.com/cfe7bfa58e98226d8e1718792631c035

А вот jsfiddle со всем необходимым кодом: https://jsfiddle.net/8xxgn8vr/

<!-- Testimonials Section --> 
<section id="testimonials" class="testimonials-section"> 
    <div class="container testimonials-container center-block"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h1 class="">Testimonials</h1> 
        <div class="col-lg-12"> 
         <div class="col-lg-6 testimonials"> 
          Review 1 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 2 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 3 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 4 
         </div> 
        </div> 
      </div> 
     </div> 
    </div> 
</section> 


.container.testimonials-container { 
    margin: 0 50px 0 50px; 
    width: auto; 
} 

.col-lg-6.testimonials { 
    background: #E5E4DF; 
    height: 500px; 
    padding: 25px; 
    width: 300px; 
    margin: 50px 25px 50px 25px; 
} 

.testimonials-section { 
    background: #F6F6F6; 
    height: 100%; 
    padding-top: 40px; 
    text-align: center; 
} 

Это в основном раздел для обзоров index.html страницы и внутри секции есть будет 4 отзыва, которые я хочу выровнять по центру.

Благодарим за помощь.

Answer 1

Поскольку вы используете bootstrap Я бы предложил не изменять непосредственно ширину элементов сетки, когда вы получаете col-lg-6, который должен занимать половину row и установить его на 300 пикселей, вы будете отбрасывать ответную реакцию начальной загрузки, и это в конечном итоге затруднит настройку для других особенностей класса col-lg-6.

Поскольку вы упомянули о том, что хотите иметь 4 отзыва по центру, вы можете изменить свой код, чтобы использовать col-lg-3, который делит row на 4 равные части.Проверьте это updated fiddle, но она будет идти, как это:

HTML:

<!-- Testimonials Section --> 
    <section id="testimonials" class="testimonials-section"> 
     <div class="container testimonials-container center-block"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <h1 class="">Testimonials</h1> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 1 
       </div> 
       </div> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 2 
       </div> 
       </div> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 3 
       </div> 
       </div> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 4 
       </div> 
       </div> 
      </div> 
     </div> 
    </section> 

Обновленный CSS:

.container.testimonials-container { 
    margin: 0 50px 0 50px; 
    width: auto; 
} 

.testimonials { 
    background: #E5E4DF; 
    height: 500px; 
    padding: 25px; 
    margin: 50px 25px 50px 25px; 
} 

.testimonials-section { 
    background: #F6F6F6; 
    height: 100%; 
    padding-top: 40px; 
    text-align: center; 
} 

Answer 2

Вы можете просто добавить класс «строка» к внешнему столбцу? Работает для меня в вашей скрипке.

<div class="row"> 
      <div class="col-lg-12 row"> 
       <h1 class="">Testimonials</h1> 
        <div class="col-lg-12"> 
         <div class="col-lg-6 testimonials"> 
          Review 1 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 2 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 3 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 4 
         </div> 
        </div> 
      </div> 

Answer 3

Вы пытаетесь установить 4 секции lg-6 в ряд lg-12. Bootstrap - это сетка, основанная на 12 частях. Если вы хотите, чтобы детали были выровнены, вам всегда нужно было подумать о 12 разделах.

Если у вас есть только 4 отзыва, вы должны убедиться, что используете 12 разделение на 4 = 3, так что вам нужно lg-3. Если у вас есть менее 4 частей, но вы все еще хотите, чтобы они заняли 4 места, вам придется вмешаться с помощью бутстрапа. (есть сообщение SO о выравнивании строки)

Также в вашем css вы меняете ширину разделов бутстрапов, и это не хорошо. (также маржа). Никогда не делайте этого;)

Пример 4 дивы: (используя внутренний Div)
HTML:

<!-- Testimonials Section --> 
<section id="testimonials" class="testimonials-section"> 
    <div class="container testimonials-container center-block"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1 class="">Testimonials</h1> 
     <div class="col-lg-12"> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 1 
      </div> 
      </div> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 2 
      </div> 
      </div> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 3 
      </div> 
      </div> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 4 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

CSS:

.container.testimonials-container { 
    margin: 0 50px 0 50px; 
    width: auto; 
} 

.testimonials div { 
    height: 500px; 
    background: #E5E4DF; 
    padding: 25px; 
    margin: 50px 25px 50px 25px; 
} 

.testimonials-section { 
    background: #F6F6F6; 
    height: 100%; 
    padding-top: 40px; 
    text-align: center; 
} 

Fiddle

Answer 4

.testimonials-section { 
 
    background: #F6F6F6; 
 
    height: 100%; 
 
    padding-top: 40px; 
 
    text-align: center; 
 
} 
 

 

 

 
.testimonials { 
 
\t background: #FFFFFF; 
 
\t 
 

 
} 
 

 
.testimonials_content{ 
 
\t width: 95%; 
 
\t margin: 0 auto; 
 
\t border: thin black solid; 
 
\t height: 500px; 
 
\t background: #F5F5F5; 
 
\t padding: 25px; 
 
\t text-align: center; 
 
\t font-size: 16px; 
 

 
}

<section id="testimonials"> 
 
\t   <div class="container testimonials-container"> 
 
\t    <div class="row"> 
 
\t    \t <h1>Tetimonials</h1> 
 
\t    
 
\t       \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 1 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 2 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 3 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 4 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t 
 
\t    </div></div> 
 
\t  </section>

вы не можете поместить 4 секции в lg-6 за это вы должны принять lg-3. и под ним вы можете взять div, указав margin или width в соответствии с вашими потребностями.

надеюсь, что это поможет.

Answer 5

Используйте следующий код:

.col-lg-6.testimonials { 
    background: #E5E4DF; 
    height: 500px; 
    padding: 25px; 
    width: 300px; 
    margin: 50px 25px 50px 25px; 
    display: inline-block; 
    float: none; 
}