Мой Bootstrap 4 адаптивный макет столбца не работает

Question

Итак, я сделал очень простой адаптивный макет веб-сайта, используя Bootstrap 4, поэтому, согласно коду, количество столбцов должно стать 4, когда он входит в режим планшета ie, когда ширина области просмотра составляет 768 пикселей, а у меня - до 770 пикселей. показывает 4 столбца, но когда его размер становится равным 769 пикселей, он переключается в режим смартфона, занимает всю ширину и накладывается друг на друга.

<div class="row">
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
</div>

Answer 1

В отличие от Bootstrap 3, Bootstrap 4 имеет немного другую сетку . Здесь sm начинает действовать с <768px. а точка останова <code>xs теперь равна col. Вот, немного переписал.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
  </div>
</div>

Answer 2

Вы используете классы col-lg-2 col-md-3 col-sm-12, если вам нужно такое же представление для мобильных устройств, просто используйте col, например col-3. если вам нужна полная ширина для самых маленьких устройств, используйте col-xs-12 это не важно, по умолчанию col-xs-12 вы можете изменить его col-xs-6 что-то вроде этого.

Answer 3

Попробуйте, это может решить вашу проблему:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-3" style="background-color:red;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:green;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:pink;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:yellow;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:white;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:orange;">
             col
        </div>
    </div>
</div>

Этот код сохранит только 4 столбца в настроении планшета и в режиме телефона, но если вы хотите сохранить 4 столбца в просмотрах p c тоже, тогда просто удалите col-lg-2 из каждого класса

Answer 4

Надеюсь, я понимаю, о чем вы спрашиваете. Это должно предотвратить переход элементов в полноэкранный режим до того, как область просмотра станет еще меньше

<div class="row">
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
</div>

просто напоминание о точках останова, размер (sm / lg) указывает размер страницы, к которой применяется правило. Правило начинается с наименьшего размера и применяется к его размеру и размерам, превышающим его, для которых нет правила. Размер столбца по умолчанию - 12, поэтому указывать его не нужно.