Bootstrap сеточные системы различают размеры по 2 типам размеров экрана - PullRequest
Новая
       59

Bootstrap сеточные системы различают размеры по 2 типам размеров экрана

1 голос
/ 28 мая 2020

Мне сейчас любопытно, как различить мою сетку BS 3 в размере рабочего стола (более широкие экраны) и размере ноутбука (меньшие экраны) . Например, в настоящее время у меня есть прямоугольная форма в центре контейнера, например: 

<div className="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
  ...
</div>

Это выглядит нормально на рабочем столе (более широкие экраны) , он находится посередине с тем же пространство справа и слева. Но как сделать так, чтобы он выглядел полным (col-md-12) без места слева и справа в ноутбуке (меньшие экраны) ? Если я проверю элемент на devtools на обоих устройствах, они оба будут помещены в состояние col-md BS media query, поэтому меньшие устройства будут получать col-md-8 col-md-offset-2 col-sm-12 col-xs-12 classes.

1 Ответ

0 голосов
/ 28 мая 2020

Точки останова сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной точке останова и всем тем, что выше нее (например, .col-sm-4 применяется к малым, средним, большим и дополнительным большие устройства, но не первая точка останова xs)

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

EDIT : изменен фрагмент и добавлен полный код, который обеспечивает желаемый результат - 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


  <div class="row bg-danger" style = "height:200px;">
    <div class="col-md-0 col-lg-2"></div> <!--This will leave correct space on the sides of screen according to screen size-->
    <div class="col-md-12 col-lg-8 bg-success text-center" style = "top:50px;height:50px;">
      Your box
    </div> <!--Consider this div to be your box-->
  </div>


</body>
</html>

Приведенный выше фрагмент кода устанавливает размер div равным -

  • 8 сеток для больших экранов настольных компьютеров ( экраны шириной 1200 пикселей или более )
  • для экранов размера - md ( для маленьких ноутбуков - экраны шириной не менее 992 пикселей ), он назначит блоку 12 сеток.

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

Надеюсь это решает вашу проблему!

...