Интервал и размер столбцов с помощью Bootstrap 4

Question

Я работаю над проектом, и у меня возникают некоторые проблемы, когда все выстраивается правильно, с правильным интервалом. Что я должен сделать (используя исключительно класс col и bootstrap 4, без CSS), чтобы заставить это работать?

Я пробовал несколько интервалов полей (например, ml-md-4) и смещение (например, offset-md-1) и, кажется, ничего не работает.

Answer 1

Столбцы имеют отступы для создания желоба (расстояние между столбцами). Поэтому цвета фона будут смешиваться, если вы не поместите фон в содержимое столбцов. Также используйте col-md-6 не 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