Bootstrap 4 понимание навигационной панели
Я новичок в этом и в целом развиваюсь. Я прохожу курс веб-разработки, в настоящее время изучаю 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>
Обновлено: Всем большое спасибо. Теперь это имеет больше смысла.
Ответы 4
Я сделаю все возможное, чтобы объяснить это. Возможно, я не пойму это на 100% правильно, но попробовать стоит. mr-auto устанавливает поле справа от блока UL. Таким образом, когда класс присутствует, он сдвигает элементы под ним вправо.
желтый блок на этой картинке - это то, что делает mr-auto: образ инструментов разработчика
Думайте о каждом элементе как о блоке. Таким образом, структура UL - это блок кода, и если ему назначен правый край, он вытеснит другие блоки.
Надеюсь, это поможет!
mr-auto - это просто класс CSS, который устанавливает для свойства margin-right значение auto. Это не то, что заставляет вашу кнопку быть справа, а то, что она идет после неупорядоченного списка, который "толкает" ее вправо.
mr-auto - это служебный класс, который помогает контролировать выравнивание элементов flex. По умолчанию элементы flex не имеют автоматического поля.
Линии <nav class = "navbar navbar-expand-lg navbar-light bg-light"> и
<div class = "navbar-collapse collapse" id = "navbarSupportedContent" style = ""> в разметке навигационной панели имеет свойство display для flex, которое выравнивает элементы уровня блока по горизонтали.
Служебный класс mr-auto помогает сдвинуть элементы вправо, а есть другой класс ml-auto, который сдвигает элементы влево.
Взгляните на иллюстрацию это в официальной документации по начальной загрузке, это поможет вам лучше понять.
"How come this mr-auto even applies to the button outside of the ul?"
Это потому, что Bootstrap 4 Navbar - это flexbox (display: flex). Следовательно, содержимое панели навигации (бренд, div и кнопка переключения) естественно отображается слева направо, но не расширяется, чтобы заполнить ширину. Однако для navbar-collapse установлено значение width:100%, что заставляет его заполнять всю ширину контейнера Navbar.
Здесь я добавил цвет фона, чтобы вы могли понять, как navbar-collapse заполняет ширину navbar:
navbar-collapse также имеет display: 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 с элементами, выровненными по левому, центру или правому краю