如何使用显示的属性来修复引导行元素:flex，阻止我的页面显示在浏览器上

Question

我正在从头开始开发一个WordPress主题。您将在下面找到我的HTML和CSS代码。

我的HTML和CSS似乎都可以，但是当我在浏览器上预览页面时，Chrome和Mozilla Firefox都什么都没有出现。然后，我决定对这些页面进行元素检查。

＆lt; - 我的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 Grid(容器，行和列(。BS3支持IE8 和BS4支持IE9 以及所有其他浏览器。

可能是打字错误。使用Col-SM-12(不是Col-SX-12(。