Как равномерно распределить элементы на панели навигации
Я пытаюсь центрировать логотип на панели навигации, но он всегда смещается влево. Есть ли способы исправить эту проблему с помощью классов начальной загрузки?
Панель навигации включает выпадающий переключатель слева, логотип в центре и две кнопки (войти и создать учетную запись) справа. Я пробовал различные попытки с маржинальным левым, mx-auto и абсолютным позиционированием, но ни одна из них не сработала, и мне нужно решение, которое будет работать, когда экран свернут.
HTML
<div class = "pos-f-t">
<div id = "outter" style = "width:100%">
<nav id = "mainnavbar" class = "navbar sticky-top navbar-dark bg-dark">
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<h3 id = "logo">Logo</h3>
<form class = "form-inline my-2 my-lg-0">
<b-link to = "/login"><b-button id = "login" class = "navbarbutton" variant = "outline-success">Log In</b-button></b-link>
<b-link to = "/create"><b-button class = "navbarbutton" variant = "outline-success">Create Account</b-button></b-link>
</form>
</nav>
</div>
<!--...#navbarToggleExternalContent-->
</div><!--end pos-f-t-->
CSS
#logo{
/* margin-left: 10%;*/
margin-bottom: 0;
padding-bottom: 3px;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#login{
margin-right: 10px;
}
Я ожидал, что каждый элемент будет равномерно распределен на широком дисплее, а также в свернутом виде. Вместо этого элементы перестраиваются, когда дисплей узкий, а логотип остается немного левее. Я также стараюсь избегать решения с абсолютным позиционированием, так как на узком дисплее будет перекрытие.
Ответы 3
Вы всегда можете использовать padding-left или padding-right и поиграться с этим. Что мне всегда нравится делать, так это использовать position:absolute, и поэтому я могу использовать коды top: "number" "px"right;left:, вам просто нужно будет поиграть с номером, пока вы не получите его правильно.
Я тоже новичок, поэтому не могу много вам рассказать.
Из-за flexbox элемент посередине сместится влево, если места недостаточно из-за крайнего правого элемента.
Чтобы центрировать свой элемент, вы все равно можете использовать position: absolute и position: relative для родительского элемента, как показано в приведенном ниже фрагменте.
Используйте это с осторожностью, поскольку элементы будут просто перекрываться, если ширина окна слишком мала.
#logo {
/* margin-left: 10%;*/
margin-bottom: 0;
padding-bottom: 3px;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#login {
margin-right: 10px;
}
nav {
position: relative;
}
nav h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "pos-f-t">
<div id = "outter" style = "width:100%">
<nav id = "mainnavbar" class = "navbar sticky-top navbar-dark bg-dark">
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<h3 id = "logo">Logo</h3>
<form class = "form-inline my-2 my-lg-0">
<b-link to = "/login">
<b-button id = "login" class = "navbarbutton" variant = "outline-success">Log In</b-button>
</b-link>
<b-link to = "/create">
<b-button class = "navbarbutton" variant = "outline-success">Create Account</b-button>
</b-link>
</form>
</nav>
</div>
<!--...#navbarToggleExternalContent-->
</div>
<!--end pos-f-t-->Полезно, но я стараюсь избегать этого решения и ищу более динамичный подход с использованием bootstrap4. Как вы упомянули, дисплей самого маленького размера приведет к тому, что логотип будет перекрывать кнопки справа, что нежелательно.
Подобные проблемы возникают всегда, если для элементов недостаточно места. Обычно для этого используется медиа-запросы. Таким образом, вы можете отображать элементы по-разному для разных размеров просмотра.
вы можете попробовать поместить гамбургер, логотип и кнопки в отдельные блоки div.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
</head>
<body>
<nav class = "navbar sticky-top navbar-dark bg-dark">
<div class = "col-md-4 col-sm-4">
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
</div>
<div class = "col-md-4 col-sm-4 text-center">
<h3>Logo</h3>
</div>
<div class = "col-md-4 col-sm-4">
<form class = "text-right">
<a class = "btn btn-primary">Login</a>
<a class = "btn btn-primary">Create</a>
</form>
</div>
</nav>
</body>
</html>Редактировать: Вы можете добавить col-md-4 или col-lg-4 или col-anyScreenSize-4 к каждому div ...
Никаких изменений нет.
Что ж, вы можете добавить col-md-4 или col-lg-4 или col-anyScreenSize-4 к каждому div, текстовый центр к логотипу и текст справа к форме справа ..
Сетка не должна использоваться внутри панели навигации. Навбар имеет свой собственный поддерживаемый контент.
Пробовал уже это решение. Абсолютное позиционирование решит проблему, пока ширина экрана не изменится. Как только я его сверну, он в конечном итоге будет перекрывать другие элементы на панели навигации.