Bootstrap Spacing Helper в разных видовых экранах - PullRequest
Новая
       44

Bootstrap Spacing Helper в разных видовых экранах

0 голосов
/ 28 февраля 2019

У меня есть следующий код. 

<section class="visit-section mb-7 mt-7 mb-sm-3 mt-sm-3 nb-md-5">
</section>

В инструментах разработчика в Firefox, когда я выбираю элемент с помощью средства выбора, кажется, что он не распознает класс mb-sm-3 или mt-sm.-3.Другими словами, добавляемый интервал от mb-7 до mt-7.После 30 минут поиска я не совсем уверен, почему это происходит.: - \

Я правильно понял из руководства по Bootstrap 4? Руководство по начальной загрузке

1 Ответ

0 голосов
/ 28 февраля 2019

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

  • Утилиты пробела Bootstrap изменяются с 0 до 5, как в mb-0 | mb-5, нет mb-7, если вы сами не укажете это.См. здесь
  • Имейте в виду, что точка останова sm применяется к смартфонам в горизонтальной ориентации;поэтому, возможно, вы еще не запускаете правильную точку останова

Если вы попробуете код, приведенный ниже, в полноэкранном режиме, вы увидите, что поля действительно меняются при изменении размера окна браузера;все, что я сделал с вашим кодом, это поменял mb-7 классы на mb-5 и исправил опечатку на последнем из ваших классов 

section {
  height: 100px;
  background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>

<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>
...