Question

我正在尝试让我的引导列像td一样运行，或者找到一些其他方式让它们具有相同的高度和垂直居中的文本。我尝试过做display:table-cell黑客但没有成功。我在下面做错了什么？

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

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

这应该可以正常工作。

P.S。我过去经常使用这种技术，但自 Flexbox 出现以来就停止了。

Answer 2

您在班级名称中输入错误：.row.like-table-row＆gt; DIV。现在继续并移除浮动以使div垂直居中。我也更新了你的小提琴：https://jsfiddle.net/vikasbaru/DTcHh/18566/

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

Answer 3

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

基本上你需要三个css规则：

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

所以你的html看起来像：

char i=128

关于jsfiddle的例子：https://jsfiddle.net/mb3kyzgp/1/

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

Answer 4

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

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

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

我已将您的小提琴更新为工作演示。 https://jsfiddle.net/rhythm19/DTcHh/33195/

如何使Bootstrap列像表格单元格一样

4 个答案: