Spacing & sizing columns using Bootstrap 4

问题

I'm working on a project and I'm having some trouble getting everything to line up correctly with the right spacing. What should I do (using the col class and bootstrap 4 exclusively, no CSS) to get this to work?

Ive tried multiple margin spacing (e.g ml-md-4) and offsetting (e.g offset-md-1) and nothing seems to work.

回答1:

Columns have padding to create the gutter (spacing between columns). Therefore, the background colors will blends together unless you put the background on the contents of the columns. Also, use col-md-6 not col-md-5...

<section class="row">
        <div class="col-12 mb-3">
            <div class="bg-info" style="height: 175px;"></div>
        </div>
        <!-- one -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- two -->
        <div class="col-12 col-md-6 mb-md-4 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- three -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- four -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
</section>

https://www.codeply.com/p/QTN0GCfLbc

来源：https://stackoverflow.com/questions/58720267/spacing-sizing-columns-using-bootstrap-4