<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
问题
我终于找到了一种简单的方法来垂直对齐 div 元素和任何其他类型的元素，使用 CSS 属性/值 display:flex;对齐元素:居中。现在唯一的问题是 Boostrap 网格系统，即 col-*-12 不起作用。如果我将一个 div 设置为在小屏幕上扩展 12 列，它不会使用react，在 less 中我删除了用于垂直对齐元素的样式。
瞄准
能够使用网格系统和垂直对齐元素。知道为什么 display:flex 会阻止网格工作吗？
HTML
<div class="header-container padding-top--sm padding-bottom--sm">
<div class="row" style="display:flex;align-items:center">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="#" alt="logo">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 text-md-center">
<p class="txt--white no-margin-bottom h-thin"> Lorem Ipsume, lorem ipsum</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-md-right">
<span class="txt--white">support@support.com</span><br>
<span class="no-margin-bottom txt--white">001111111111 (8am - 8pm GMT)</span>
</div>
</div>
</div>
CSS
.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }
.header-container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
width: 90%;
}
最佳答案
原因是因为您没有让您的行“包装”其内容。
默认情况下，它设置为 nowrap 值，这意味着它不允许内容扩展容器。
尝试将 flex-wrap: wrap; 属性添加到您的行样式
<div class="row" style="display:flex;align-items:center;flex-wrap: wrap;">
...
</div>
PS: Consider avoiding inline styles, use external or atleast internal styles as much as possible
关于html - Bootstrap 网格系统和垂直对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40242604/