Блог

Главная - Вопросы по программированию - Адаптивная Сеточная Система Начальной Загрузки

Адаптивная Сеточная Система Начальной Загрузки

#html #css #twitter-bootstrap #bootstrap-grid

Вопрос:

Я создаю раздел, содержащий некоторый текст, но мне нужен текст в правой половине раздела, а слева есть фоновое изображение для раздела, поэтому я сделал col-md-4 для неиспользуемой половины, потому что я не хочу скрывать фоновое изображение и col-md-8 к тексту, как скрыть раздел col-md-4 на маленьком экране и позволить col-md-8 покрыть весь раздел? я использую bootstrap 5

код:

 <!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="header-main row">
  <div class="col-md-4"></div>
  <div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
    <h1 class="first-font">MOBI TECH</h1>
    <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
    <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
  </div>
</div>

вывод на рабочий стол:

Вид на рабочем столе

вывод на телефоны:

Просмотр телефона

Ответ №1:

Чтобы скрыть элемент в точке останова экрана частиц, используйте .d-sm-none .d-md-block 

 <!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="header-main row">
  <div class="col-md-4 .d-sm-none .d-md-block"></div>
  <div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center">
    <h1 class="first-font">MOBI TECH</h1>
    <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
    <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
  </div>
</div>

это оставит макет таким, как вы определили для md экранов, скроет первый div и сделает второй div 12 cols широким на sm экранах.

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

1. спасибо, что уделили мне время, но это еще не все.

2. Поскольку вы включили информацию, которую сейчас используете Bootstrap 4, вы должны использовать .d-sm-none .d-md-block , так как скрытые классы там исчезли. Я отредактировал ответ

Метки: