Столбцы сетки не переносятся должным образом

Question

У меня следующая структура столбцов bootstrap -4:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">A</div>
    <div class="col-xs-6 col-sm-4">B</div>
    <div class="col-xs-6 col-sm-4">C</div>
  </div>
</div>

Ожидаемый макет столбца в соответствии с размером экрана:

XS:

[  A ]
[B][C]

SM и выше:

[A][B][C]

Однако в XS каждый div принимает всю ширину, например:

[A]
[B]
[C]

Проверьте фрагмент JSFiddle здесь.

Что здесь может быть не так?

Answer 1

col-xs-* просто не существует на Bootstrap

Варианты сетки:

• col-*
• col-sm-*
• col-md-*
• col-lg-*
• col-xl-*

^{Сукре: https://getbootstrap.com/docs/4.0/layout/grid/#grid -опции}

Вероятно, вы хотели использовать col-*

.row {
  background: #E2E2E2;
}

.card {
  border: solid 1px #6c757d;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          A
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          B
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          C
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Вы используете col-xs-, но его нет в Bootstrap версии 4.x. Таким образом, небольшая точка останова на самом деле является первой, определенной для мобильных устройств. *:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    A
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    B
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    C
                </div>
            </div>
        </div>
    </div>
</div>

Если нет, переместите точку останова sm до md.

Answer 3

Я протестировал ваш код на "codepen.io" и работает нормально. Возможно, "CDN", который использует "jsfiddle", - это какая-то версия, которая не отображает классы надлежащим образом. Важно, используете ли вы «CDN» или загружаете на себя файлы p c (. js,. css, и c.), Чтобы они поддерживали версию Bootstap, которую вы используете. .

Answer 4

Перемещение "строки класса div" на одну строку ниже решит вашу проблему.