html - 我如何修复具有显示 : flex, 属性的 Bootstrap 行元素阻止我的页面在浏览器上显示

Question

我正在从头开发一个 Wordpress 主题。 你会在下面找到我的 html 和 css 代码。

我的 html 和 css 似乎一切正常，但是当我在浏览器上预览页面时，chrome 和 Mozilla firefox 什么都没有出现。然后我决定对这些页面进行元素检查。

<--我的 HTML 代码-->

<div class="container-fluid">
<div class="row">
    <div class="col-sx-12">
        <div class="header-container background-image text-center" 
 style="background-image: url(<?php header_image();?>);">
            <div class="header-content">
                <div class="nav-container">

                </div><!--.nav-container-->
            </div><!--.header-content-->           
        </div><!--.header-container-->        
    </div><!--.col-sx-12-->   
</div><!--.row-->    
</div><!--.container-fluid-->

/* 我的 CSS 代码 @package nuorigins */

/*

通用

---

*/

.background-image{
    background-position: center center; 
    background-size: cover; 
    background-repeat: no-repeat;
}

/*

标题

*/

.header-container{
    position: relative;
    display: block;
    height: 250px;
}

我发现行标记阻止了我的页面显示。

下面是检查行的元素:

.row{
    display: ms-flexbox;
    display: flex;
    ms-flexwrap: wrap;
    flex-wrap:wrap;
    margin-right: -15px;
    margin-left: -15px;
}

请注意，这是 Bootstrap 中的一行。

现在我注意到当我停用显示时:flex；从行的属性来看，我的页面显示正常。

我希望有人告诉我。我的 Bootstrap 行有什么问题？ 是因为我的浏览器不支持 bootstrap 行，还是由于我的 bootstrap 文件的另一个问题。

Answer 1

所有浏览器都可以很好地显示 Bootstrap 网格(容器、行和列)。 BS3支持IE8+，BS4支持IE9+等所有浏览器。

可能是打字错误。使用 col-sm-12(不是 col-sx-12)。