Bootstrap Grid не помещает div в одну строку

Question

Я не могу понять, почему это не работает. В нем 12 столбцов, но он работает только с 11

---

HTML

<section>
    <div class="container">
        <div class="row">

            <div class="advantages col-12">
                <div class="col-4">one</div>
                <div class="col-4">two</div>
                <div class="col-4">three</div>
            </div>

        </div>
    </div>
</section>

SASS

.advantages
    text-align: center
    div
        display: inline-block

Answer 1

Это то, что сказал @Jay Kariesch, но вы также можете держать advantages в том же div, что и строка, например:

<div class="advantages row">

Таким образом, вы будете поддерживать класс advantages для всехdivs inside.

Answer 2

Вы должны удалить col-12 и оставить свой col-4 внутри .row. Столбцу должно предшествовать строка.

Так как 4 + 4 + 4 = 12, вам не нужно определять ваш предыдущий столбец col-12, и вам не нужно ничего устанавливать на inline-блок.