Bootstrap4 Как настроить класс начальной загрузки элемента сетки, но только если сетка выходит из строя? - PullRequest
Новая
       14

Bootstrap4 Как настроить класс начальной загрузки элемента сетки, но только если сетка выходит из строя?

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

Возможно ли каким-либо образом изменить класс начальной загрузки элемента сетки с col-md-9 до col-md-12, но только в случае разрыва сетки (например, из-за изменения размера окна браузера).

Пример:

https://jsfiddle.net/kp41m0xq/

<body>
<div class="row">
  <div class="col-md-3">
    <!-- Something, graph or so -->
  </div>
  <div class="col-md-9">
    <!-- Something, graph or so -->
  </div>
</div>
</body>

Это будет выглядеть, например, как следующее, когда окно достаточно большое:

enter image description here

но очень плохо, если окно маленькое:

enter image description here

Как это должно выглядеть с небольшим окном:

enter image description here

Можно ли получить эффект того, что класс равен col-md-9 (первое изображение), если окно достаточно большое и col-md-12 (третье изображение), если окно маленькое? Было бы здорово, если бы это было возможно с самой начальной загрузкой. В противном случае я мог бы также использовать jquery.

Ответы [ 2 ]

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

Вам нужно использовать комбинацию классов для небольших экранов 

<body>
<div class="row">
  <div class="col-md-3 col-sm-3">
    <!-- Something, graph or so -->
  </div>
  <div class="col-md-9 col-sm-9">
    <!-- Something, graph or so -->
  </div>
</div>
</body>

или используйте общие классы 

<body>
<div class="row">
  <div class="col-3">
    <!-- Something, graph or so -->
  </div>
  <div class="col-9">
    <!-- Something, graph or so -->
  </div>
</div>
</body>
0 голосов
/ 24 мая 2019

Вам необходимо использовать класс 'col-sm-12' вместе с классом 'col-md-9' следующим образом 

<body>
<div class="row">
  <div class="col-md-3">
    <!-- Something, graph or so -->
  </div>
  <div class="col-md-9 col-sm-12">
    <!-- Something, graph or so -->
  </div>
</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...