对齐引导列

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;
}