Почему столбцы не плавают, когда в Bootstrap нет строк?

Question

Я пытался читать:

Какова цель.row в Bootstrap? и http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Однако ни один из них не объясняет, почему мои столбцы в следующем коде не плавают слева:

<div class = "container">
    <div class = "col-2">
        1
    </div>
    <div class = "col-2">
        2
    </div>
</div>

Answer 1

Так как row имеет следующие гибкие свойства. В начальной загрузке 4 сетка работает, используя гибкий контейнер. Поскольку не будет флекс-контейнера без row div, дети внутри него не будут плавать, как хотелось бы. (Хотя я должен упомянуть, что float свойство, используемое при создании сетки bootstrap 4)

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

Прочтите эту ссылку о том, как работает начальная сетка.

Answer 2

Вы должны добавить warp div с row class
так как row установить его flex и тогда это может быть в той же строке
Я рекомендую вам узнать о flex: https://www.w3schools.com/Css/css3_flexbox.asp

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class = "container">
<div class = "row">
    <div class = "col-sm-2">
        1
    </div>
    <div class = "col-sm-2">
        2
    </div>
</div>
</div>