如何使用引导程序将这 3 列居中

Question

我对引导程序相对较新，我试图将以下 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不是课程），我认为您在这里有两个选择：

选项 1：将您更改col-md-3为col-md-4并将其放入container：

<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 示例 1

选项 2：更改您的col-md-3tocol-md-2和col-md-offset-1tocol-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 示例 2

这两种方法都会更改布局，以便占据完整的 12 列（或正确偏移），但一种方法为您提供了更多的工作空间。

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