html - 如何在 Bootstrap 中将 3 个框居中

Question

我有三个盒子，我需要将它们集中起来，但我就是不知道该怎么做。

照片 -> -> http://i.imgur.com/mc99Oxo.png

HTML:

 <div class="row">
      <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
      <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
      <div class="col-md-4 box">CONHECER PESSOAS</div>
 </div>

CSS:

 #about .box {
      background-color: transparent;
      border: 1px solid white;
      width: 250px;
      height: 350px;
      margin-top: 50px;
      margin-bottom: 50px;
      margin-right: 140px;
 }

我已经尝试设置 margin: 0 auto;到行类，但它根本不起作用..

Answer 1

用 .container 类将它们包裹在一个 div 中。

例子:

<div class="container">
    <div class="row">
       <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
       <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
       <div class="col-md-4 box">CONHECER PESSOAS</div>
    </div>
</div>