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

发布时间：2020-12-17 21:20:38 所属栏目：安全来源：网络整理

导读：我是相对较新的bootstrap我试图让以下3列居中,但它们偏离中心.每列都是col-md-3,第一列的偏移量为1,我可以理解为什么它没有居中,但我无法弄清楚如何使它们居中. 我在bootply创建了这个例子解决方法布局的问题在于,为了使3列居中,您必须将左列偏移1.5(剩余

我是相对较新的bootstrap我试图让以下3列居中,但它们偏离中心.每列都是col-md-3,第一列的偏移量为1,我可以理解为什么它没有居中,但我无法弄清楚如何使它们居中.

我在bootply创建了这个例子

解决方法

布局的问题在于,为了使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并将其放入容器流体中：

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!