如何使Bootstrap列的行为类似于表格单元格

Question

我正在尝试让我的Bootstrap列像一样，或找到其他方法使它们具有相等的高度和垂直居中的文本。我尝试使用display:table-cell hack，但没有成功。下面我做错了什么？

Fiddle: https://jsfiddle.net/DTcHh/18560/

<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text that will surely be long enough to go onto another line if I make it thiiiiiiiiiiiiiiiiiiiiiiiiiisssssssssssssssssssssssss long
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>
<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>

---

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.row.like-table-row { display: table-row; }
  .row.like-table.row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; }

- Subpar Web Dev

Answer 1

您做的一切都是正确的，除了删除 float。如果不删除浮动，它会破坏表格布局。

.row.like-table-row {
    display: table-row;
}

.row.like-table-row > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #000;
    float:none;
}

这应该可以正常工作。

另外，我曾经经常使用这种技术，但自从出现了 Flexbox 之后就不再使用了。

- Alexander Solonik

Answer 2

正确的方法是使用.row作为table，并将.col-*用作table-cell。

.like-table {
    display: table;
    width: 100%;
}

.like-table > [class*=col-] {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

我已经更新了您的fiddle，使之成为一个可工作的演示。https://jsfiddle.net/rhythm19/DTcHh/33195/

- Rhythm Ruparelia

Answer 3

你的类名中有个错字：.row.like-table-row > div。现在，请移除浮动以垂直居中divs。我已经更新了你的fiddle：https://jsfiddle.net/vikasbaru/DTcHh/18566/。

  .row.like-table-row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; float: none; }

- Vikas Baru

Answer 4

为了使用垂直对齐，您需要一个具有垂直对齐属性的容器和一个要对齐的内部元素。

基本上，您需要三个CSS规则：

.vertical-align {
  height: 150px; /* Height is important or it won't work */
  display: table-cell; /* We will give our div table cell property */
  vertical-align: middle; /* This will do the trick to center vertically inner element */
}

所以你的HTML将会是：

<div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
  <div class="vertical-align">
    <p>Foo bar</p>
  </div>
</div>

您在 jsfiddle 上的示例：https://jsfiddle.net/mb3kyzgp/1/

如果您需要动态高度，我建议使用 jQuery 计算最高元素的高度，或者您可以设置一个您认为不会达到的高度（快速简单但不是最好的方法）。

- xWaZzo