html - Bootstrap 4 why is my grid column "eating" other columns

Question

I'm trying to learn bootstrap 4 grid. Right now experimenting about responsive boxes.

The boxes should respond when the window is resized..

Large:
Line 1 = Box 1, Box 2, Box 3, Box 4

Medium:
Line 1 = Box 1
Line 2 = Box 2, Box 3, Box 4

Small:
Line 1 = Box 1
Line 2 = Box 2, Box 3
Line 3 = Box 4

I was able to achieve what I wanted in the Large, Medium and Extra Small.. I'm having problem with the Small size (col-sm-). My problem is that my Box #4 eats up Box #2 and Box #3. See image below:

bootstrap grid at lg, md, sm, and xs

When I try to uncomment the background-color.. The error becomes more obvious (Boxes 2 and 3 are totally covered by Box 4). Here is an image:

Box 4 totally covers Box 2 and Box 3

I tried adding margins to the div-content class (green border) and padding to the [class*="col-"] but box #4 still eats up the other two boxes.

Here's my code:

 .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>

I hope someone could help explain why this happens and suggestions on how to fix would be greatly appreciated. Thanks in advance!

标签： htmlcssbootstrap-4

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>