Question

我目前正在使用Bootstrap创建一个网页，我正在使用列。我的页面看起来像这样：

我想将最后一列（在第二行）居中，但页面是动态的，我不知道有多少个容器。

我在Google上找到了这两个解决方案：

1）将此添加到我的css：

.col-centered{
  float: none;
  margin: 0 auto;
}

2）将其添加到类标记属性

col-lg-offset-4

但这两种解决方案都是这样的：

这不是我想要的。我希望它看起来像这样：

我如何实现这一目标？

Answer 1

默认情况下，

Bootstrap的列是浮动的，具有css float属性。使用float，我们无法对齐列。但是我们可以使用display: inline-block。我们所需要的只是从列的样式中删除float并使用inline-block将其更改为vertical-align: middle，您将得到您想要的内容。但请不要忘记删除inline-block附带的额外空间。

这是诀窍。

＆＃13;

.wrapper {
  background: green;
  padding: 20px 0;
}

.box {
  border-radius: 10px;
  margin-bottom: 30px;
  background: #fff;
  padding: 10px;
  color: #000;
}

.center-align {
  letter-spacing: -4px;
  text-align: center;
  font-size: 0;
}

.center-align [class*='col-'] {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  font-size: 14px;
  float: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="container center-align">
    <div class="row">
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container center-align">
    <div class="row">
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

注意：设置font-size：0;字母间距：父母的-4px和父母的字体大小：14px;字母间距：0返回子元素将删除内联块附带的空格。

Answer 2

您需要将最后一个文本块添加到另一行，并将“col-md-4”更改为“col-md-12”。

<div class="row">
    <div class="col-md-4"> // column 1
        bla bla bla 
    </div>
    <div class="col-md-4"> //column 2
        bla bla bla
    </div>
    <div class="col-md-4"> // column 3
        bla bla bla
    </div>
</div>
<div class="row">
    <center>
    <div class="col-md-12"> //last column, also note I changed it to 12
        bla bla bla
    </div>  
    </center>
</div>

Answer 3

Bootstrap具有内置功能，可以实现您所需的布局，而无需引入其他CSS规则。只需使用.col-md-offset-*类：

使用.col-md-offset-*类将列移到右侧。这些类通过*列增加列的左边距。例如，.col-md-offset-4将.col-md-4移到四列上。

您的布局最终会与此类似：

.show-grid {
  margin-bottom: 15px;
}

.your-custom-div {
  height: 50px;
  background-color: green;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row show-grid">
      <div class="col-md-4">
        <div class="your-custom-div">
          .col-md-4
        </div>
      </div>
      <div class="col-md-4">
        <div class="your-custom-div">
          .col-md-4
        </div>
      </div>
      <div class="col-md-4">
        <div class="your-custom-div">
          .col-md-4
        </div>
      </div>
      <div class="clearfix visible-md"></div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4 col-md-offset-4">
        <div class="your-custom-div">
          .col-md-4 .col-md-offset-4
        </div>
      </div>
      <div class="clearfix visible-md"></div>
    </div>
  </div>
</body>
  
</html>

编辑＃1：对于您不知道将从数据库中为第二行提取多少列的要求，另一个选项是在输出HTML时使用条件也输出{{1} } class如果集合中项目数的模数除以列数，则等于1，否则按照惯例继续。在使用Razor的ASP.NET中，这看起来像这样（下面的示例是为了演示提出的逻辑而保持简单，它可以重构为它自己的HTML帮助类，同时考虑其他列大小）：

.col-md-offset-4

编辑＃2：看起来我误解了你的要求。对于1个剩余列，此解决方案就足够了。更多的是，我会选择@ Muhammad的答案。

Bootstrap将整列中的所有列居中

3 个答案: