间距和使用Bootstrap 4调整列大小 [英] Spacing & sizing columns using Bootstrap 4

问题描述

我正在做一个项目，但在使所有内容正确对齐并保持正确间距方面遇到一些麻烦.我应该怎么做(专门使用col类和bootstrap 4，没有CSS)使它起作用?

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?

我尝试了多个边距间距(例如ml-md-4)和偏移量(例如offset-md-1)，但似乎没有任何效果.

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

推荐答案

列具有填充以创建装订线(列之间的间距).因此，除非您将背景放在列的内容上，否则背景色将混合在一起.另外，请使用col-md-6而不是col-md-5 ...

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

这篇关于间距和使用Bootstrap 4调整列大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！