如何将 bootstrap 中有间隙的 3 个框居中

Question

我正在尝试将 3 个框居中，它们之间有一点 space（装订线？），并且页面一角还有 space。
我尝试了 class="col-sm-2 col-md-offset-1"（col-sm-2 使它们变小，并为间隙偏移 1），但它并没有真正居中于页面的中间，并且在移动设备上每个列"streched" 到角落，我不想要那个。有什么想法吗？
谢谢！

Answer 1

您可以将您的内容包装在 .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

Answer 2

你需要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>

如何将 bootstrap 中有间隙的 3 个框居中

How to center 3 boxes with gaps in bootstrap

html

css

twitter-bootstrap