我正在使用最新的 Bootstrap 网格系统开发移动优化网站。我希望在 md 和 lg 中有两列彼此相邻,但在 xs 和 sm 中垂直堆叠。为了正确布局,如果堆叠时顺序需要不同,我也会使用左右浮动。最后,我想将每列中的内容垂直居中。
除了 Bootstrap 之外,这是我的 css:
.left {
float: left;
}
.right {
float: right;
}
@media (min-width: 992px) {
.vertical-container-md {
position: relative;
}
.vertical-center-md {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right.vertical-center-md {
left: 50%;
}
}
这是我的 html:
<section class="container">
<div class="row vertical-container-md">
<div class="col-xs-12 col-sm-12 col-md-6 left vertical-center-md">
<h1>Little Content</h1>
<p>1234567890</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 right">
<h1>Lots of Content</h1>
<p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
<h2>Sub Title</h2>
<input type="submit" value="Button" />
</div>
</div>
</section>
如果标记为 vertical-center-md 的列始终是最小的,则效果很好。但是,在某些情况下,一列的响应图像可以变大或变小。所以要解决这个问题,我只需将 vertical-center-md 添加到两列。应该工作吧?不。
当两列都使用这种垂直居中的实现时,行 div 将失去其自动高度,列 div 将转换为高于行的 50%。
问题:如何使用 Bootstrap 网格系统实现响应式列内容的垂直居中?
最佳答案
谢谢来自 vertical-align with Bootstrap 3 的 zessx。我很高兴在坚持使用纯 CSS 的同时摆脱 float 、定位和转换。
.border {
border: 1px solid black;
}
.vertical-middle {
display: inline-block;
vertical-align: middle;
float: none;
}
记得在内联 block 元素之间注释空格!
<section class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6 border vertical-middle">
<h1>Little Content</h1>
<p>1234567890 1234567890 1234567890</p>
</div><!--
--><div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6 border vertical-middle">
<h1>Lots of Content</h1>
<p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p>
<h2>Sub Title</h2>
<input type="submit" value="Button" />
</div>
</div>
</section>
似乎每个人都对 Boostrap 网格系统有同样的提示,希望他们在 v4 中修复它。
关于html - Bootstrap 垂直对齐列内容与移动优化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32642057/