如何使Bootstrap列像表格单元格一样工作
如何使Bootstrap列像表格单元格一样工作
提问于 2016-03-25 02:17:56
我正在尝试让我的引导程序列表现得像td一样，或者找到其他方法使它们具有相同的高度和垂直居中的文本。我尝试过display:table-cell破解，但没有成功。下面我做错了什么？
小提琴：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; }回答 3
Stack Overflow用户
发布于 2017-06-02 23:42:13
正确的方法是使用.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/
Stack Overflow用户
发布于 2016-03-25 02:29:01
类名中有一个拼写错误：.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; }Stack Overflow用户
发布于 2016-03-25 02:51:17
要使用垂直对齐，您需要一个容器，该容器将具有垂直对齐属性和一个要对齐的内部元素。
基本上，您需要三个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来计算最高元素，或者你可以设置一个你认为不会达到的高度(快速和简单，但不是最好的)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36207297
复制相关文章
相似问题