Question

我正在尝试学习bootstrap 4网格。现在正在尝试响应式框。

调整窗口大小时，这些框应会响应。

大：
第1行=方框1，方框2，方框3，方框4

中等：
第1行=方框1
第2行=第2栏，第3栏，第4方框

小：
第1行=方框1
第2行=方框2，第3框
第3行=方框4

我能够在大型，中型和特小型中实现我想要的。.我在使用小型（col-sm-）时遇到问题。我的问题是我的4号箱子吃了2号箱子和3号箱子。参见下图：

bootstrap grid at lg, md, sm, and xs

当我尝试取消注释背景颜色时。错误变得更加明显（方框2和3被方框4完全覆盖）。这是一张图片：

Box 4 totally covers Box 2 and Box 3

我尝试在div-content类（绿色边框）上添加边距，并在[class * =“ col-”]上添加边距，但第4格仍然吞噬了其他两个框。

这是我的代码：

 .container {
        border: 3px solid black;
    }
    
    .container .row {
        border: 3px solid red;
    }
    
    .row [class*="col-"] {
        border: 3px solid blue;
        
    }
    
    .column-content {
        border: 3px solid green;
        margin: 10px;
        /*background-color: #ffbe5d;*/
    }

 <div class="container">
        <div class="row">
    
            <div class="col-xl-6 col-lg-3 col-md-12 col-sm-12 col-xs-12">
                <div class="column-content">Box 1</div>
            </div>
    
            <div class="col-xl-6 col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="column-content">Box 2</div>
            </div>
    
            <div class="col-xl-6 col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="column-content">Box 3</div>
            </div>
    
            <div class="col-xl-6 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                <div class="column-content">Box 4</div>
            </div>
    
        </div>
    </div>

我希望有人能帮助解释为什么会发生这种情况，并希望大家对如何修复提出建议。预先感谢！

Answer 1

海上这个

.container {
  
    border: 3px solid black;
}

.container .row {
    border: 3px solid red;
}

.row [class*="col-"] {
    border: 3px solid blue;
    padding: 10px;
}

.column-content {
    border: 3px solid green;
    margin: 10px;
/*     background-color: #ffbe5d; */
}

<div class="container">
    <div class="row">

        <div class="col-xl-6 col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="column-content">Box 1</div>
        </div>

        <div class="col-xl-6 col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="column-content">Box 2</div>
        </div>

        <div class="col-xl-6 col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="column-content">Box 3</div>
        </div>

        <div class="col-xl-6 col-lg-3 col-md-4 col-sm-12 col-xs-12">
            <div class="column-content">Box 4</div>
        </div>

    </div>
</div>

Bootstrap 4为什么我的网格列“吃掉”了其他列

1 个答案: