скрывать загрузочные дивы один за другим при получении определенного разрешения (отзывчиво) - PullRequest
Новая
       2

скрывать загрузочные дивы один за другим при получении определенного разрешения (отзывчиво)

0 голосов
/ 30 мая 2019

parentRow - это строка, содержащая 3 или более делений. Это не должно идти во второй ряд. Первый div «Apple» должен быть виден в каждом разрешении. Второй div "Orange" должен быть виден для col-md-4 и col-lg-4 и col-xl-4, в то время как 3-й div "Ананас" должен быть виден только для col-lg-4 и col-xl-4?

Короче говоря, есть строка, содержащая 3 или более элементов div (сетки начальной загрузки 4.3.1), когда размер экрана изменяется, элементы div должны скрываться один за другим, а при меньшем разрешении один элемент div (сетка) должен оставаться видимым?

Короче и эффективный метод приветствуется. Пожалуйста, избегайте медиазапросов. 

    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 parentRow">
    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        Apple 
    </div>
    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        Orange
    </div>
    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        Pineapple
    </div>
</div>

Ответы [ 2 ]

1 голос
/ 30 мая 2019

Вы должны использовать утилиты отображения , чтобы скрыть элементы в определенных точках останова.

Например, .d-none.d-md-block будет скрыто при xs и sm разрешениях и будет иметь display: block при md, lg и xl. 

.box {
  padding: .75rem;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
  text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
  <div class="col box">
    apple (always visible)
  </div>
  <div class="col box d-none d-md-block">
    Orange (visible on md and bigger)
  </div>
  <div class="col box d-none d-lg-block">
    PineApple (visible on lg and bigger)
  </div>
</div>
0 голосов
/ 30 мая 2019

Этот бит кода вы можете поместить на любую страницу для быстрого ознакомления, когда вы делаете много тестов изменения размера.

Он показывает только div с именем = активный размер экрана и делает остальноескрыто: 

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="d-none d-xl-block          ">XL</div>
    <div class="d-none d-lg-block d-xl-none">LG</div>
    <div class="d-none d-md-block d-lg-none">MD</div>
    <div class="d-none d-sm-block d-md-none">SM</div>
    <div class="       d-xs-block d-sm-none">XS</div>
  </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...