对齐引导列

问题描述：

如何在下方图像的所有侧上给出相等的空间？边缘的左侧比右侧更少，底部的空间更多。因此，如果不用手动更改偏移值的列，是否还有另一种可能性？对齐引导列

.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>

你为什么不尝试填充，让元素基础上，填充和利润率决定它们之间的空间。 .. –

答

在大多数情况下，你不应该改变对.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

谢谢。有效。 –

答

这可以帮助你 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; 
}

相关推荐