CSS - Центр начальной загрузки 5 col-md-4

Question

У меня есть 5 col-md-4, обернутый внутри контейнера, который обернут внутри ряда, который обернут внутри элемента <section>. Сейчас у меня 3 столбца в первой строке и 2 во втором. То, что я пытаюсь сделать, - это центрировать все элементы col-md-4, так что нижние 2 не выравниваются влево, что оставляет пустое пространство справа. Вот мой код:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<section id="home-features"> 
 
    <div class="row"> 
 
    <div class="container"> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-custom-home.jpg); background-size: cover;"> 
 
      <a href="/custom-home/" class="service-link"> 
 
      <h3>Custom Homes</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-home-renovations.jpg); background-size: cover;"> 
 
      <a href="/home-renovation" class="service-link"> 
 
      <h3>Home Renovations</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-luxury-features.jpg); background-size: cover;"> 
 
      <a href="/luxury-features/" class="service-link"> 
 
      <h3>Luxury Features</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-project-management.jpg); background-size: cover;"> 
 
      <a href="/project-management/" class="service-link"> 
 
      <h3>Project Management</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-condo-renovation.jpg); background-size: cover;"> 
 
      <a href="/condo-renovations/" class="service-link"> 
 
      <h3>Condo Renovations</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</section>

Answer 1

В вашем нижнем первом столбце, который

Добавить md-offset-2,

как этот

<div class="col-md-4 col-md-offset-2"> 

нет необходимости для второго столбца нижней. Вы можете посмотреть здесь: http://codepen.io/ihemant360/pen/XKpXLE

Answer 2

<section id="home-features"> 

           <div class="row"> 

             <div class="container"> 

               <div class="col-md-4"> 
                 <div style="height: 229px; background: url(images/feature-custom-home.jpg); background-size: cover;"> 
                   <a href="/custom-home/" class="service-link"> 
                     <h3>Custom Homes</h3> 
                   </a> 
                 </div> 
               </div> 

               <div class="col-md-4"> 
                 <div style="height: 229px; background: url(images/feature-home-renovations.jpg); background-size: cover;"> 
                   <a href="/home-renovation" class="service-link"> 
                     <h3>Home Renovations</h3> 
                   </a> 
                 </div> 
               </div> 

               <div class="col-md-4"> 
                 <div style="height: 229px; background: url(images/feature-luxury-features.jpg); background-size: cover;"> 
                   <a href="/luxury-features/" class="service-link"> 
                     <h3>Luxury Features</h3> 
                   </a> 
                 </div> 
               </div> 

               <div class="col-md-2"> 
               </div> 

               <div class="col-md-4"> 
                 <div style="height: 229px; background: url(images/feature-project-management.jpg); background-size: cover;"> 
                   <a href="/project-management/" class="service-link"> 
                     <h3>Project Management</h3> 
                   </a> 
                 </div> 
               </div> 

               <div class="col-md-4"> 
                 <div style="height: 229px; background: url(images/feature-condo-renovation.jpg); background-size: cover;"> 
                   <a href="/condo-renovations/" class="service-link"> 
                     <h3>Condo Renovations</h3> 
                   </a> 
                 </div> 
               </div> 

             </div> 

           </div> 

         </section> 

Используйте приведенный выше код, чтобы решить вашу проблему.

Answer 3

По умолчанию столбцы Bootstrap являются стилями css float. Вам необходимо переопределить это с помощью display: inline-block, на который может повлиять text-align: center.

.container.center { 
 
    letter-spacing: -4px; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 

 
.container.center .col-md-4 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    letter-spacing: 0; 
 
    text-align: left; 
 
    font-size: 14px; 
 
    float: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section id="home-features"> 
 

 
    <div class="row"> 
 

 
    <div class="container center"> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-custom-home.jpg); background-size: cover;"> 
 
      <a href="/custom-home/" class="service-link"> 
 
      <h3>Custom Homes</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-home-renovations.jpg); background-size: cover;"> 
 
      <a href="/home-renovation" class="service-link"> 
 
      <h3>Home Renovations</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-luxury-features.jpg); background-size: cover;"> 
 
      <a href="/luxury-features/" class="service-link"> 
 
      <h3>Luxury Features</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-project-management.jpg); background-size: cover;"> 
 
      <a href="/project-management/" class="service-link"> 
 
      <h3>Project Management</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div style="height: 229px; background: url(images/feature-condo-renovation.jpg); background-size: cover;"> 
 
      <a href="/condo-renovations/" class="service-link"> 
 
      <h3>Condo Renovations</h3> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 

 
</section>