twitter-bootstrap 如何使 Bootstrap 列像表格单元格一样工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36207297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap columns act like table cells
提问by Subpar Web Dev
I'm trying to make my bootstrap columns act like tds, or find some other way for them to have equal height and vertically centered text. I've tried doing the display:table-cellhack but to no success. What am I doing wrong below?
我试图让我的引导列像tds一样，或者找到一些其他方式让它们具有相同的高度和垂直居中的文本。我试过做display:table-cell黑客，但没有成功。我在下面做错了什么？
Fiddle: https://jsfiddle.net/DTcHh/18560/
小提琴：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; }
采纳答案by Alexander Solonik
You're doing everything right except removing the float, (If you don't remove the float, it breaks the table layout.)
除了删除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;
}
This should work just fine.
这应该可以正常工作。
P.S. I used to use this technique a lot, but have stopped ever since the advent of Flexbox.
回答by Rhythm Ruparelia
Correct method is to use .rowas tableand .col-*as table-cell.
正确的方法是使用.rowastable和.col-*as table-cell。
.like-table {
display: table;
width: 100%;
}
.like-table > [class*=col-] {
display: table-cell;
vertical-align: middle;
float: none;
}
I have updated your fiddle to working demo. https://jsfiddle.net/rhythm19/DTcHh/33195/
我已将您的小提琴更新为工作演示。https://jsfiddle.net/rhythm19/DTcHh/33195/
回答by xWaZzo
To use vertical align you need a container that will have the vertical align property and an inner element to be aligned.
要使用垂直对齐，您需要一个具有垂直对齐属性和要对齐的内部元素的容器。
Basically you need three css rules:
基本上你需要三个 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 */
}
So your html will look like:
所以你的 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>
Your example on jsfiddle: https://jsfiddle.net/mb3kyzgp/1/
你在 jsfiddle 上的例子：https://jsfiddle.net/mb3kyzgp/1/
If you need dynamic height, i suggest using jQuery to calculate tallest element, or you can set a height you think you won't reach (fast and easy but not the best).
如果您需要动态高度，我建议使用 jQuery 来计算最高元素，或者您可以设置一个您认为无法达到的高度（快速简单但不是最好的）。
回答by Vikas Baru
You have a typo in class name: .row.like-table-row > div. Now go ahead and remove floats to get the divs vertically centred. I updated your fiddle as well: https://jsfiddle.net/vikasbaru/DTcHh/18566/
你在类名中有一个错字：.row.like-table-row > 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; }
