twitter-bootstrap - 如何使用 bootstrap 将这 3 列居中

Question

我对 bootstrap 比较陌生，我试图让以下 3 列居中，但它们偏离中心。每列都是 col-md-3，第一列的偏移量为 1，我可以理解为什么它不居中，但我不知道如何让它们居中。

我已经在 bootply 中创建了示例

Answer 1

布局的问题是，为了将 3 列居中，您必须将左列偏移 1.5(剩余列的一半):

// 12 Column Layout, 3 columns of col-md-3, offset of 1.5 needed (which isn't a class) 
12 - (3 + 3 + 3) = 3 / 2 = 1.5

因为这行不通(因为 col-md-offset-1.5 不是一个类)，我认为你这里有 2 个选择:

选项 1:将 col-md-3 更改为 col-md-4 并将其放入容器:

<div class="container">
  <div class="col-md-4 box">
    <div>                            
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-4 box">
    <div>                            
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-4 box">
    <div>                            
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
</div>

Bootply Example 1

选项 2:将 col-md-3 更改为 col-md-2 和 col-md-offset- 1 到 col-md-offset-3 并将其放入 container-fluid 中:

<div class="container-fluid">
  <div class="col-md-2 col-md-offset-3 box">
    <div>                            
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-2 box">
    <div>                            
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-2 box">
    <div>                            
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
</div>

Bootply Example 2

这两种方法都会更改布局，以便占据全部 12 列(或正确偏移)，但其中一种方法可以为您提供更多的工作空间。

有关 Bootstrap Grid 的更多信息，请参阅 Documentation