CSS "display: flex"/Firefox 中的行问题（使用引导程序）

Question

我正在使用的网站在除 Firefox 之外的所有浏览器（IE、Chrome、Safari、Mobile）中都能正常显示。

在所有浏览器（Firefox 除外）中，div class="vertical-center" 中的内容在 x 轴上居中对齐并填满页面的整个宽度：

但是，在 Firefox 中，div class="row" 被挤压到页面左侧**:

是否有解决此问题且最终结果相同的方法？我做错了什么吗？

HTML:

<section> 
    <div class="vertical-center">
        <div class="row">
            <!-- Row should fill width of "section", but does not in Firefox -->
        </div>
    </div>
</section>

CSS:

.vertical-center {
min-height: 50%;
min-height: 50vh;
display: flex; /* This causes a problem, but is required for proper display*/
align-items: center;
}

Answer 1

Firefox 似乎没有正确计算 div.row 的宽度，作为块元素它应该是 100%。

所以需要自己设置。

.vertical-center .row { width:100%; }

CSS "display: flex"/Firefox 中的行问题（使用引导程序）

CSS "display: flex"/row problems in Firefox (using bootsrap)

html

css

firefox

compatibility

twitter-bootstrap