Выравнивание колонки бутстрапа

Question

Как дать равные места со всех сторон для изображения ниже? Левая сторона поля меньше, чем права, а нижние - больше. Итак, без ручного изменения столбца со значениями смещения есть ли еще одна возможность?

.row{ 
 
    margin-top: 150px; 
 
    margin-left: 30px; 
 
} 
 

 
#one{ 
 

 
    background-color:lavender; 
 
    width:330px; 
 
    height:250px; 
 
    border: 1px solid black; 
 
} 
 

 
#two{ 
 
    background-color:lavenderblush; 
 
    width:330px; 
 
    height:250px; 
 
    border: 1px solid black; 
 
} 
 

 
#three{ 
 
    background-color:lavender; 
 
    width:330px; 
 
    height:250px; 
 
    border: 1px solid black; 
 
}

<div class="container-fluid"> 
 
    
 

 
    <div class="row"> 
 

 
    <div class="col-md-4 "> 
 
    <div class="col-md-12" id="one" > 
 
     Some Content.. 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4 "> 
 
    <div class="col-md-12" id="two"> 
 
     Some Second Content.. 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-md-12" id="three"> 
 
     Some Second Content.. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <div class="col-md-12" id="one" > 
 
     Some Content.. 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-md-12" id="two"> 
 
     Some Second Content.. 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-md-12" id="three"> 
 
     Some Second Content.. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <div class="col-md-12" id="one" > 
 
     Some Content.. 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-md-12" id="two"> 
 
     Some Second Content.. 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-md-12" id="three"> 
 
     Some Second Content.. 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
    </div>

Answer 1

В большинстве случаев вы не должны изменить левый/правый край на .row, потому что это важно how the Bootstrap grid works. Также col-* не должен содержаться непосредственно в другом col-*.

.row{ 
    margin-top: 150px; 
} 

Просто используйте центрированную DIV внутри колонок ..

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div id="one" class="center-block"> 
       Some Content.. 
      </div> 
     </div> 
     <div class="col-md-4 "> 
      <div id="two" class="center-block"> 
       Some Second Content.. 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div id="three" class="center-block"> 
       Some Second Content.. 
      </div> 
     </div> 
    </div> 
</div> 

Demo on Codeply

Answer 2

Это может помочь вам Codepen link

ли это для всех из них.

<div class="row"> 
    <div class="col-md-4 "> 
    <div id="one" > 
     Some Content.. 
    </div> 
    </div> 
    <div class="col-md-4 "> 
    <div id="two"> 
     Some Second Content.. 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div id="three"> 
     Some Second Content.. 
    </div> 
    </div> 
</div> 

CSS:

#three{ 
    background-color:lavender; 
    width:100%; 
    height:250px; 
    border: 1px solid black; 
    margin: auto; 
}