Question

我试图将3个盒子放在中间位置，它们之间有空间（排水沟？），还有页面角落的空间。
我尝试了class =“col-sm-2 col-md-offset-1”（col-sm-2使它们变小，间隙偏移1），但它并没有真正居中于页面中间，也在移动设备上每个col都“拉伸”到角落，我不想要那样。任何想法？
谢谢！

Answer 1

您需要text-center

.grid3 >div{
  height: 200px;
  background: rgba(0,0,0,.4);
  float: none;
  display: inline-block;
  background-clip: content-box
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row text-center grid3">
  <div class="col-xs-3">.col-md-4</div>
  <div class="col-xs-3">.col-md-4</div>
  <div class="col-xs-3">.col-md-4</div>
</div>

Answer 2

您可以将内容包装在.well中。然后列的填充将是你的排水沟。此外，如果您希望将3列置于中心，则无法使用.col-sm-3。您必须使用.col-sm-2或.col-sm-4

<div class="col-sm-4">
  <div class="well">
    <h3>Column 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
  </div>        
</div>

http://www.bootply.com/CUbF8SQg8q

如何使3个盒子在引导程序中居中

2 个答案: