自带网格系统和垂直对齐问题

Question

问题

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

Aim

能够使用网格系统和垂直对齐元素。知道为什么display: flex阻止网格工作吗？

<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

原因是你不能让你的行“包装”它的内容。

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

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

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

科德芬

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