Question

问题

我终于找到了一种使用CSS属性/值div垂直对齐display:flex; align-items: center元素和任何其他类型元素的简单方法。现在唯一的问题是Boostrap网格系统即col-*-12不起作用。如果我在一个小屏幕上设置一个div来扩展12列，它不会做出反应，我会删除用于垂直对齐项目的样式。

目标

能够使用网格系统并垂直对齐元素。知道为什么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%;
}

Answer 1

原因是因为你没有让你的行＆＃34;包裹＆＃34;它的内容。

默认设置为nowrap值，这意味着它不允许内容扩展容器。

尝试将flex-wrap: wrap;属性添加到您的行样式

<div class="row" style="display:flex;align-items:center;flex-wrap: wrap;">
...
</div>

MSDN

PS：考虑避免内联样式，尽可能使用外部或至少内部样式

Bootstrap网格系统和垂直对齐问题

1 个答案: