我怎么能使用引导中心这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是不是类）我觉得你有2个选择在这里：

选项1：更改col-md-3col-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 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列被占用（或正确偏移），但是一个方法给了你更多的空间来处理。

有关引导网格的详细信息请参见Documentation

Answer 2

你可以这样做： 尝试使用一个div包裹一行偏移2.这是第3块将通过每边2（1.5）来划分。并且做一个容器容器包装所有。

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

Answer 3

尝试在列使用列，不要忘记使用序列container > row > col

<div class="container"> 
     <div class="row"> 
     <div class="col-md-*"></div> 
     <div class="col-md-*"></div> 
     </div> 
    </div> 

.box{ 
 
    background-color: lavender; 
 
    border:1px solid; 
 
    text-align: center; 
 
} 
 
.column{ 
 
    background-color: AliceBlue; 
 
    margin: 5px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-10 col-sm-offset-1"> 
 

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

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

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

 
    </div> 
 
    </div> 
 
</div>