Центрирование панели навигации: Bootstrap 4
Я пытаюсь центрировать элементы на панели навигации, но независимо от того, что я делаю, элементы приклеиваются слева. В какой-то момент я мог заставить их всех сместиться на полдюйма вправо или влево, переключаясь между ml-auto, mx-auto и mr-auto. Теперь ничего не двигается, даже когда я это делаю. Я не уверен, что я сделал.
Я уже пробовал несколько примеров кода из других сообщений, но ни один из них не работает. Я относительно новичок в кодировании, поэтому не уверен, что сломалось.
я пробовал добавить d-flex justify-content-center в navbar-collapse, обоснование содержимого по центру в div «collapse navbar-collapse» и несколько других вещей, предложенных в других сообщениях.
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class = "navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#"><img src = "img/logo3.png" style = "width:13%;" ;></a>
<button class = "navbar-toggler" type = "button" data- toggle = "collapse" data-target = "#navbarResponsive">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse d-flex justify-content-center" id = "navbarResponsive">
<ul class = "navbar-nav ml-auto">
<li class = "nav-item">
<a class = "nav-link" href = "#">home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">home</a>
</li>
</ul>
</div>
</div>
</nav>Насколько мне известно, в моем CSS на данный момент ничего не нацелено на Nav.
Мне просто нужны элементы навигации в середине панели навигации.
Ответы 2
Удалите класс CSS ml-auto из тега ul.
Добавьте это в CSS
.navbar-brand {
position: absolute !important;
}
спасибо за ответ. Удаление ml-auto переместило все на дюйм влево к центру, но все еще находится в самом левом углу страницы.
Вместо ml-auto попробуйте mx-auto
К сожалению ничего не изменилось..
Вы проверили демо codepen, которое я добавил в предыдущем комментарии?
Можете ли вы добавить скриншот того, как панель навигации отображается в вашем проекте?
извините за это, я не заметил демо, все еще привыкаю к сайту. поэтому я проверил, и ваше предложение действительно сработало, но только когда я удалил изображение своего логотипа. теперь он центрирован, но мне нужно, чтобы мой логотип был в левом углу.
Эй, твоя проблема исправлена?
нет, мне все еще нужно выяснить, как расположить элементы по центру с логотипом в углу.
Я работаю над этим. Эта проблема возникает, поскольку положение пункта меню панели навигации зависит от ширины вашего логотипа. Хороший вопрос кстати.
ок круто. Спасибо, я ценю помощь. Если это поможет, исходное изображение имеет размер 900 x 900 пикселей, но я установил ширину 14% внутри тега img, используя стиль.
Проверьте мой ответ сейчас. Я добавил исправление для этой проблемы. Вот рабочая демонстрация codepen для него.
Теперь исправление будет работать, даже если вы зададите логотипу любую ширину. Элементы навигации всегда будут в center
Ваш код работает с Hello world, но мой логотип по-прежнему сдвигает все вправо, когда я добавляю ссылку. Может дело в размере? также элементы навигации немного смещены от центра... опять же, я ценю помощь. добавлю скриншот.
извините нет возможности добавить скриншот..
Попробуйте уменьшить изображение логотипа, а не использовать изображение размером 900 x 900 пикселей и изменять его ширину с помощью CSS. Работает ли решение, если вы добавляете любое другое изображение
Я сделал изображение маленьким, а элементы навигации теперь гораздо более центрированы, но все еще справа от центра. Мне просто нужно переместить его примерно на 3 дюйма влево.
вы добавили .navbar-brand { position: absolute !important; } в CSS
да, я сделал, но ничего не меняется. Мой логотип теперь 150x150 px.
Чтобы CSS работал, он должен быть ниже ссылки bootstrap CSS, которую вы добавили в файл index.html.
хорошо, так что получилось, чтобы все было в нужном положении, но теперь логотип выходит за пределы панели навигации. Кажется, что навигационная панель подходит только для самих элементов, в то время как логотип перетекает через край на страницу.
Это сработало для меня: <div class = "collapse navbar-collapse d-flex" id = "navbarResponsive"> и <ul class = "navbar-nav mx-auto">.
/* Nesessary for the logi i use
You might not need it
*/
.navbar-brand img {
width: 64px;
height: auto;
}
/* To keep the nav items
* centered and full width
* on mobile phones
*/
@media (max-width: 575px) {
.navbar-nav {
width: 100%;
}
.navbar-nav li {
text-align: center;
}
}<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class = "navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#"><img src = "https://i.stack.imgur.com/SENHZ.png" ;></a>
<button class = "navbar-toggler" type = "button" data- toggle = "collapse" data-target = "#navbarResponsive">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse d-flex" id = "navbarResponsive">
<ul class = "navbar-nav mx-auto">
<li class = "nav-item">
<a class = "nav-link" href = "#">home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">home</a>
</li>
</ul>
</div>
</div>
</nav>к сожалению, это не исправило. Предметы не двигаются.
@ jay777 Скопируйте и вставьте код, который я разместил. Вы забыли закрыть <ul> в своем. Я внес правку в ваш код. Вы должны принять это.
извините за это, ваш код работает, но по какой-то причине он работает только тогда, когда я удаляю свой логотип в левом углу. когда я разрываю ссылку на изображение, элементы списка центрируются, но мне нужно, чтобы логотип был в углу.
@ jay777 Здесь я тоже добавил логотип.
какой размер вашего логотипа?
@jay777 128x128px. Это не должно происходить. Мой был слишком высоким.