как изменить класс начальной загрузки col-md-10 на col-md-12 div с помощью css

#javascript #html #css #twitter-bootstrap #bootstrap-4

#javascript #HTML #css #twitter-bootstrap #начальная загрузка-4 #bootstrap-4

Вопрос:

Я использовал раздел эскизов и раздел просмотра в своем проекте. Итак, я разделил родительский div на два div, первый — col-md-3 (то есть уменьшенный div), а второй — col-md-9 (то есть раздел просмотра). Теперь я хочу скрыть первый div и изменить второй div на col-md-12 для небольших устройств, таких как мобильный телефон или ipad.

Есть ли какой-нибудь способ сделать это с помощью медиа-запроса?

1. Пожалуйста, опубликуйте код, который у вас есть на данный момент, и обратитесь к документации Bootstrap . Точки останова уже используются сеточными классами начальной загрузки, поэтому нет причин добавлять пользовательский медиа-запрос.

Ответ №1:

Система начальной загрузки col для grid имеет это встроенное. Когда вы указываете col-md-3, вы говорите: «на среднем экране дайте этому col 3 блока». Вы также можете сделать бок о бок col-sm-12, чтобы предоставить ему всю строку, когда на большом экране, и col-sm-0, чтобы скрыть его, когда на меньших экранах. Посмотрите здесь, чтобы получить лучшее объяснение о сеточной системе начальной загрузки: https://getbootstrap.com/docs/4.1/layout/grid /

Ответ №2:

 <div class="row">
  <div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
  <div class="col-md-9">Some data</div>
</div>

Это решит вашу проблему.
Для очень маленьких и маленьких миниатюр экрана не будет отображаться.

1. @Durgesh Gupta, вы новичок в stackoverflow. Если ответ правильный, проверьте как правильный ответ и проголосуйте

2. скрыть миниатюру с помощью class=»col-md-3 d-none d-sm-none d-md-block», но мой раздел просмотра все еще находится в col-md-9. Итак, что я должен для этого сделать?

3. Используйте так, <div class=»col-md-9 col-12″></div>