Bootstrap 4 navbar понимание

Question

Я новичок в этом и развиваюсь в целом. Я беру курс webdev, в настоящее время изучаю CSS через Bootstrap. Видео были созданы во время начальной загрузки 3, но я пытаюсь изучить Bootstrap 4. В настоящее время я пытаюсь понять навигационные панели, и у меня возникают трудности с пониманием правильного выравнивания элементов. Это в основном из документации по начальной загрузке, за исключением того, что кнопка заменяет элемент поиска. Я понимаю, что когда я снимаю mr-auto в теге ul, кнопка больше не выравнивается вправо. Как получилось, что этот mr-auto применим к кнопке за пределами ul? Я думаю, что этот ответ поможет преодолеть пропасть во многом моего понимания. Заранее благодарю за помощь.

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <button>Click</button>
  </div>
</nav>

Редактировать: Большое спасибо всем. Теперь это имеет больше смысла.

Answer 1

"Почему этот мр-авто применим даже к кнопке за пределами ul?"

Это потому, что Bootstrap 4 Navbar - это flexbox (дисплей: flex). Поэтому содержимое Navbar (бренд, div и кнопка переключения navbar-collapse) естественным образом отображаются слева направо, но не расширяется, чтобы заполнить ширину. Однако для navbar-collapse было установлено значение width:100%, что заставляет его заполнять всю ширину контейнера Navbar.

Здесь я добавил цвет фона, чтобы вы могли видеть, как navbar-collapse заполняет ширину navbar:

Также отображается navbar-collapse: flex, поэтому это также дети следуют правилам flexbox . Дети вашего navbar-collapse - это navbar-nav ul и кнопка. При использовании авто-полей на дочерних элементах flexbox они сдвигаются влево, вправо или в центр. Когда вы добавляете mr-auto (автоматическое поле справа) к navbar-nav ul, она нажимает кнопку до упора вправо. Когда он вынут, предметы возвращаются к естественному прилипанию к левой стороне.

Здесь я добавил цвет размытия фона к navbar-nav, чтобы вы могли видеть, как он придерживается левой стороны navbar-collapse:

Итак, если вы визуализируете авто-поле справа от navbar-nav, то имеет смысл нажимать кнопку вправо.

Демо: https://www.codeply.com/go/oTjFSG1g29

---

Также см .:
Bootstrap 4 выравнивает элементы панели навигации вправо
Bootstrap NavBar с выровненными по левому, среднему или правому краю элементами

Answer 2

mr-auto - это просто класс CSS, который устанавливает свойство margin-right для элементов auto. Это не то, что заставляет вашу кнопку быть справа, это то, что она идет после неупорядоченного списка, который «толкает» ее вправо

Answer 3

mr-auto - это служебный класс, который помогает управлять выравниванием в flex элементах. По умолчанию элементы flex не имеют автоматического запаса.

Линии <nav class="navbar navbar-expand-lg navbar-light bg-light"> и <div class="navbar-collapse collapse" id="navbarSupportedContent" style=""> в разметке navbar имеет свойство display flex, которое выравнивает элементы уровня блока по горизонтали.

Утилита класса mr-auto помогает сдвинуть предметы вправо, а есть еще один класс ml-auto, который толкает предметы влево.

Посмотрите на эту иллюстрацию в официальных документах по начальной загрузке, это поможет вам лучше понять.

Answer 4

Я сделаю все возможное, чтобы объяснить это. Я не могу сделать это на 100% правильно, но это стоит попробовать. mr-auto устанавливает поле справа от блока UL. Таким образом, когда класс существует, он выталкивает элементы под ним вправо.

желтый блок на этом рисунке - это то, что делает mr-auto: dev tools image

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

Надеюсь, это поможет!