Блог

Главная - Вопросы по программированию - Как отобразить две колонки в мобильном телефоне с помощью bootstrap 5?

Как отобразить две колонки в мобильном телефоне с помощью bootstrap 5?

#html #bootstrap-5

Вопрос:

Я использую bootstrap 5. Я должен показать 2 столбца на своем мобильном телефоне, но он отображает 1 столбец.

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">
<div class="container">
  <div class="row">

    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading one</h2>
    </div>
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading Two</h2>
    </div>
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading Three</h2>
    </div>
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
      <h2>Heading Four</h2>
    </div>

  </div>

</div>

Ниже приведен скриншот браузера.

введите описание изображения здесь

Ответ №1:

col-xs С v4 больше ничего нет, поэтому измените на col-6

Примечание: Также вам не нужно дублировать одинаковые точки останова. просто используйте первые (потому что они мобильны в первую очередь)

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-6">
      <h2>Heading one</h2>
    </div>
    <div class="col-lg-3 col-6">
      <h2>Heading Two</h2>
    </div>
    <div class="col-lg-3 col-6">
      <h2>Heading Three</h2>
    </div>
    <div class="col-lg-3 col-6">
      <h2>Heading Four</h2>
    </div>
  </div>
</div>

Комментарии:

1. Спасибо за помощь. Я не понял сути заметки.

2. Да, это работает. могу ли я использовать как col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-6 ?

3. но я использую его для разных размеров экрана.

4. Bootstrap является мобильным первым, смысл прерывания, начиная от маленьких до больших экранов, поэтому, когда вы кладете col-6 его 2 столбцами, пока вы хотите изменить 4 колонок (к примеру) и тогда вы решаете, где вы хотите начать с 4 колонками, представьте себе это средство останова, поэтому после начала использования col-md-3 , от того и будет alaways быть 3 колонки

Метки: