Bootstrap 5.1 Navbar с 3 разделами (слева, по центру, справа)
У меня возникли проблемы с правильным макетом панели навигации, с которой я работаю.
Я хочу, чтобы панель навигации имела 3 раздела, как описано в заголовке, для первого раздела слева есть img и имитирующая кнопку, которая должна находиться в одной строке независимо от ширины.
Для второго раздела в центре просто h1 поверх h2 с текстовым центром.
А третий крайний правый столбец нужно разделить на сетку 2x3, в первом столбце должна быть кнопка, закрывающая 2 ряда, во втором - две кнопки в каждом ряду, а в третьем столбце нужно быть кнопкой с изображением внутри, которая охватывает две строки, как и первая, но с большим пространством для покрытия по ширине по сравнению с другими (например, 25%, 25%, 50% соответственно)
Вот что у меня есть на данный момент.
<nav class = "navbar navbar-expand-lg navbar-toggleable navbar-light bg-light border-bottom text-black">
<ul class = "navbar-nav mx-auto flex-shrink">
<li class = "nav-item active row">
<a class = "nav-link col-auto" href = "">
<img src = "~/archivos/logo.jpg" class = "rounded" width = "90" height = "90" />
</a>
<a class = "nav-link collapse navbar-collapse btn-warning border rounded d-flex justify-content-center col-6" asp-area = "" asp-controller = "Home" asp-action = "Index">
<i class = "fa-solid fa-left-long text-white" style = "font-size:3vw;"></i>
</a>
</li>
</ul>
<ul class = "navbar-nav mx-auto flex-shrink">
<li class = "nav-item text-center justify-content-center">
<div>
<h4 class = "h1">Analysis tools</h4>
<small class = "h2 text-warning">SPC Tool</small>
</div>
</li>
</ul>
<ul class = "navbar-nav mx-auto flex-shrink">
<li class = "nav-item">
<div class = "row">
<div class = "col-lg-2 col-md-2 col-sm-3 col-xs-2" style = "padding:0px">
<div class = "short-div">
<a class = "nav-link" asp-area = "" asp-controller = "Home" asp-action = "Logs">
<div class = "btn btn-success">
<i class = "fa-solid fa-table"></i>
</div>
</a>
</div>
<div class = "short-div">
<a class = "nav-link" asp-area = "" asp-controller = "Home" asp-action = "Login">
<div class = "btn btn-dark">
<i class = "fa-solid fa-key"></i>
</div>
</a>
</div>
</div>
<div class = "col-lg-5 col-md-2 col-sm-3 col-xs-2">
<a class = "navbar-link" href = "">
<img class = "w-100 h-100" src = "~/Archivos/pren.png" />
</a>
</div>
</div>
</li>
</ul>
</nav>
И вот макет, к которому я стремлюсь. Ожидаемая планировка
Я новичок в вопросах на форуме, поэтому прошу прощения, если игнорирую какие-либо правила редактирования/форматирования.
Я перепробовал много примеров для своих поисков (тот, который я сейчас использую для тестирования, взят с форума), а также те, которые есть в документации начальной загрузки, но не могу получить их правильно, иногда панель навигации наклоняется влево. без изменения полей или отступов.
И я пробовал решения с форумов в SO, но размер и поведение элементов внутри элементов навигационной панели, которые мне нужны, чтобы вписаться в макет навигационной панели, похоже, неправильно удерживают их вместе.
Обновлено: Вот код https://codepen.io/Daniel_ISC/pen/ExzQvyK
Ответы 1
Некоторые из ваших классов (например, navbar-toggleable и navbar-light), похоже, не являются допустимыми классами Bootstrap, поэтому я удалил их.
Обычно ul с классом navbar-nav используется для списка ссылок, а не для логотипа и центрального текста, и поскольку группа из четырех кнопок представляет собой какое-то действие, а не ссылки, вам, вероятно, не нужен ulструктура.
Столбцы Bootstrap лучше всего использовать с контейнером div, а не как часть навигационной панели. Панель навигации имеет собственный набор стилей, которые усложняют структуру строк/столбцов.
Самый простой способ структурировать ваши четыре кнопки — использовать сетку CSS (см. мой пример).
Ваш пример не включал мобильную версию, но поскольку вы использовали класс navbar-expand-lg для навигационной панели, я добавил кнопку navbar-toggler, чтобы вы могли увидеть, как ваша навигационная панель может выглядеть на меньшем экране.
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />
<style>
.navbar-brand {
margin-right: 0;
flex-basis: 480px;
/* same as the button group so the center text is centered */
}
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-rows: 42px 42px;
grid-template-columns: 92px 92px 276px;
}
.btn-storage {
grid-row: 1 / 3;
grid-column: 1 / 2;
background: linear-gradient(0deg, rgba(255, 191, 2, 1) 0%, rgba(255, 228, 36, 1) 84%, rgba(255, 255, 60, 1) 100%);
border-color: #fbe633;
}
.btn-table {
grid-row: 1 / 2;
grid-column: 2 / 3;
background-color: #198754;
border-color: #177a4c;
}
.btn-table svg {
width: 18px;
height: 28px;
fill: white;
}
.btn-key {
grid-row: 2 / 3;
grid-column: 2 / 3;
background-color: #212529;
border-color: #171a1c;
}
.btn-key svg {
width: 18px;
height: 18px;
fill: white;
}
.btn-logo {
grid-row: 1 / 3;
grid-column: 3 / 4;
color: transparent;
background-image: url('https://fakeimg.pl/300x80/d69f18/fff?text=Product+Engineering');
background-size: contain;
/*or cover */
background-color: #d69f18;
border-color: #c99517;
}
</style>
<nav class = "navbar navbar-expand-lg bg-light border-bottom text-black">
<div class = "container-fluid">
<a class = "navbar-brand d-inline-flex align-items-center" href = "#">
<img src = "https://www.onlygfx.com/wp-content/uploads/2015/12/circle-logo-template.jpg" alt = "Logo" width = "90" height = "90" class = "d-inline-block align-text-top rounded-circle">
<!-- Font Awesome https://fontawesome.com/icons/left-long?f=classic&s=solid -->
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" width = "128px" height = "128px">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d = "M177.5 414c-8.8 3.8-19 2-26-4.6l-144-136C2.7 268.9 0 262.6 0 256s2.7-12.9 7.5-17.4l144-136c7-6.6 17.2-8.4 26-4.6s14.5 12.5 14.5 22l0 72 288 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-288 0 0 72c0 9.6-5.7 18.2-14.5 22z" /></svg>
</a>
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarToggler" aria-controls = "navbarTogglerDemo01" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "d-none d-lg-block text-center">
<h4 class = "h1">Analysis tools</h4>
<small class = "h2 text-warning">SPC Tool</small>
</div>
<div class = "collapse navbar-collapse flex-grow-0" id = "navbarToggler">
<div class = "navbar-nav ms-auto mb-2 mb-md-0">
<div class = "grid-container">
<button type = "button" class = "btn btn-primary btn-storage">
<!-- Font Awesome https://fontawesome.com/icons/database?f=classic&s=solid -->
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 448 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d = "M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z" /></svg>
</button>
<button type = "button" class = "btn btn-primary btn-table">
<!-- Font Awesome https://fontawesome.com/icons/table?f=classic&s=solid -->
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d = "M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z" /></svg>
</button>
<button type = "button" class = "btn btn-primary btn-key">
<!-- Font Awesome https://fontawesome.com/icons/key?f=classic&s=solid -->
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d = "M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z" /></svg>
</button>
<button type = "button" class = "btn btn-primary btn-logo">Primary</button>
</div>
</div>
</div>
</div>
</nav>
<h1>Hello, world!</h1>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Ваш пример был настроен для использования Bootstrap 5.1.3, который был выпущен в октябре 2021 года и заменен на Bootstrap 5.2.0 в июле 2022 года (два года назад). Для своего примера я использовал Bootstrap 5.3.3, так как это текущая версия.
Еще одно замечание: лучше использовать функцию фрагмента кода Bootstrap, а не ссылаться на страницу с кодом, поскольку иногда примеры внешнего кода исчезают.
О, это действительно то, что мне нужно, работает отлично!! Я не привык работать ни с внешним интерфейсом, ни с начальной загрузкой, поэтому понятия не имел, чего ожидать от классов начальной загрузки, а насчет размеров (lg, md, xs и т. д.) сайт предназначен исключительно для стандартного монитора ПК, но у меня было они включены из-за шаблона, который я искал. И я попытался использовать фрагмент SO, но графический интерфейс не появился. Возможно, я что-то пропустил, но учту это в следующий раз. В целом это именно то, что я искал! Большое спасибо!