Question

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

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

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

当我调整屏幕大小以使其变大时，在某些时候它会进入2x2网格但是当我调整它以使其更大时，网格会停止水平增长，这使得它看起来像这样：

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转换为类）：

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

https://jsfiddle.net/2a6w3sve/

Answer 2

我遇到了一些有弹性盒和网格的麻烦。有时，flex需要以像素为单位的宽度而不是百分比。

您是否在没有display:flex的情况下进行了测试？

Bootstrap网格2x2水平停止增长

2 个答案: