【发布时间】：2017-09-05 00:35:21
【问题描述】：
我在引导 4 列高度和垂直对齐方面遇到问题。 这是有问题的JSFiddle。
我需要设计一个包含项目的布局，在桌面上它们都在同一行，在移动设备上我们得到两行。所有这些都遇到了边框。
问题是，当我想将它们的内容垂直居中时，我无法保持列的高度。
如果没有添加类，列的高度相同，但内容位于顶部居中。搜索后，我发现align-items-center 将我的列居中，但高度没有保留。
这打破了我的边框布局。
我也尝试添加 my-auto、align-self-center 类，但没有成功。
.why-choose-warranty {
width: 100%;
height: 100%;
background-color: #f5f3ef;
color: #11155e;
padding: 1rem;
}
.why-choose-warranty .row {
padding: 1rem;
}
.why-choose-warranty .row div {
justify-content: center;
}
/* Small screens (mobiles) */
@media screen and (max-width: 992px) {
.why-choose-warranty .row {
background-color: white;
border-radius: .5rem;
}
.why-choose-warranty img {
max-width: 40%;
max-height: 40%;
}
.why-choose-warranty .row div:nth-child(1),
.why-choose-warranty .row div:nth-child(2) {
border-right: 1px solid #d7d5d1;
border-bottom: 1px solid #d7d5d1;
}
.why-choose-warranty .row div:nth-child(3) {
border-bottom: 1px solid #d7d5d1;
}
.why-choose-warranty .row div:nth-child(4),
.why-choose-warranty .row div:nth-child(5) {
border-right: 1px solid #d7d5d1;
}
}
/* Big screens (desktops) */
@media screen and (min-width: 992px) {
.why-choose-warranty img {
max-width: 60%;
max-height: 60%;
}
.why-choose-warranty .row div {
border-right: 1px solid #d7d5d1;
}
.why-choose-warranty .row div:last-child {
border-right: 0;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="why-choose-warranty">
<div class="row col-12 col-lg-10 m-auto align-items-center">
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">Test</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>
</div>
<div class="col-4 col-lg-2">
<p class="text-center font-weight-bold">TEST</p>
</div>
</div>
</div>有人发现这个问题吗？或者可以帮我弄清楚吗？
提前谢谢大家
【问题讨论】：
-
尝试使用 col-md-#（用于平板电脑）和 col-sm-#（用于移动设备）等类。这应该有效。参考：v4-alpha.getbootstrap.com/layout/grid/#column-resets
-
col-sm 在我的例子中被 col 替换，而 col-md 被 col-lg 替换。所以它不是一个解决方案
标签： html css flexbox bootstrap-4