html - Bootstrap 网格 2x2 停止水平增长

Question

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

Goal - Big screen (红色 = 标题，绿色 = 平铺)

在小屏幕上一切正常，它显示标题栏，下面有 4 个图 block ，如下所示:

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/