Bootstrap 网格 2x2 停止水平增长

Question

我的布局有问题。我正在尝试制作一个具有 header 和 2x2 平铺网格的菜单，在较小的屏幕上必须为 1x4。

Goal - Big screen （红色 = Header，绿色 = 平铺）

在小屏幕上一切正常，它显示 header 栏，下面的 4 个图块如下所示：

Goal and actual - Small screen

当我调整屏幕大小使其变大时，有时它会变成 2x2 网格，但当我将它调整到更大时，网格停止水平增长，这使得它看起来像这样：

Actual - Big screen

HTML

<div class="overlay-content" id="container-fluid">
    <div class="row">
        <div class="tile col-md-6 border">
            <a href="#">asdf</a>
         </div>
         <div class="tile col-md-6 border">
             <a href="#">asfd</a>
         </div>                
         <div class="tile col-md-6 border">
             <a href="#">asdf</a>
         </div>
         <div class="tile col-md-6 border">
             <a href="#">asdf</a>
         </div> 
     </div>
 </div>

CSS

.overlay {    
    height: 100%;
    width: 100%;    
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
}

.overlay-header{    
    border:10px;
    font-family:fontNavbar;
    filter: invert(100%);
}

.overlay-content {
    position: absolute;
    height: 100%;
    text-align: center;
    display:flex;
}

我错过了什么？提前致谢！

Answer 1

由于您没有足够的内容来强制各列占满 50% 宽度，因此添加以下 CSS（并将 container-fluid ID 从 id 转换为 class):

.overlay-content.container-fluid,
.overlay-content.container-fluid > .row {
    width: 100%;
}

https://jsfiddle.net/2a6w3sve/

Bootstrap 网格 2x2 停止水平增长

Bootstrap grid 2x2 stops growing horizontally

html

css

twitter-bootstrap-4