Question

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

中创建了示例

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 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

Answer 2

你可以这样做：尝试使用偏移量为2的div换行。第3个块将被每边2除（1.5）。并制作一个包装所有的fuild容器。

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

使用flex属性：

.centered {
  display: flex;
  justify-content: center;
}

在您的HTML中：

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

如何使用bootstrap将这3列居中

4 个答案: