Как использовать col-sm inline? - PullRequest
Новая
       36

Как использовать col-sm inline?

0 голосов
/ 05 октября 2019

У меня есть два блока с использованием Bootstap 3: 

<div class="row">
      <div class="col-md-4 col-sm-4">A</div>
      <div class="col-md-4 col-sm-4">B</div>
</div>

Когда я нахожусь в мобильном режиме, блоки располагаются друг под другом.

Как разместить их в ряд, пока не будет свободного места

1 Ответ

1 голос
/ 05 октября 2019

К вашему сведению в начальной загрузке 3 мы получили четыре основных контрольных точки, как показано ниже:

lg: Большие устройства Рабочие столы (≥1200 пикселей)

md: Средние устройства Рабочие столы (≥992px)

см: Маленькие устройства Таблетки (≥768px)

xs: Дополнительные небольшие устройства Телефоны (<768px)</p>

Каждый из них получил 12 столбцов с четным размером и 15px желоб слева и справа.

Для получения дополнительной информации вы можете проверить сетку начальной загрузкисистемная документация здесь .

Чтобы создать отзывчивую строку из 2 столбцов во всех основных точках останова, начиная с col-xs-* с использованием max-width медиазапроса и всего прочего min-width, все, что вам нужнонужно создать два столбца с col-xs-6 и col-sm-6 и обернуть их в row, как показано ниже: 

div.row>div {
  padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-xs-6 bg-info">A</div>
    <div class="col-sm-6 col-xs-6 bg-success">B</div>
  </div>
</div>

ПРИМЕЧАНИЕ: Я просто добавляю container-fluid, padding: 20px; и цвета фона для лучшей иллюстрации.

...