#html #css #bootstrap-4 #alignment #nav
#HTML #css #bootstrap-4 #выравнивание #навигация
Вопрос:
Я новичок в bootstrap, поэтому все еще пытаюсь разобраться в этом.
Чего я хотел бы добиться, так это выровнять логотип бренда по левому краю, а значок телефона и значок гамбургера справа. Это должно выглядеть так:
Код, который я «неправильно» использую, можно увидеть здесь:
https://www.codeply.com/go/rFsHK3IT8g
Как вы можете видеть, в настоящее время в режиме просмотра со смартфона все они выровнены по левому краю.
Любая помощь будет принята с благодарностью. Спасибо.
V
Ответ №1:
Нет необходимости в структуре строк. Просто используйте шаблон, предоставленный bootstrap для создания панели навигации, он должен работать нормально, а поскольку у вас есть 2 кнопки справа, сохраните их в d-flex
div.
Обновлен этот раздел в приведенном ниже коде
<a class="navbar-brand" href="#" style="padding:0px;margin:0;">
<img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
</a>
<div class="d-flex ml-auto">
<a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
<i class="fas fa-phone fa-2x"></i>
</a>
<button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars fa-2x"></i>
</button>
</div>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
<a class="navbar-brand" href="#" style="padding:0px;margin:0;">
<img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
</a>
<div class="d-flex ml-auto">
<a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
<i class="fas fa-phone fa-2x"></i>
</a>
<button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars fa-2x"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Affiliations</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
Комментарии:
1. Спасибо, Нандита. Да, это работает хорошо, и это то, что я хотел. Я выбрал это из других решений, поскольку его легче понять, и для моей задачи его будет легче реализовать для дальнейших дополнений, которые мне нужно внести. Спасибо всем за ответы.
Ответ №2:
Хорошо, я немного изменил ваш html. Вы можете увидеть рабочий код здесь: https://www.codeply.com/go/paFQ52qLUK
Что вам нужно сделать, это просто:
- убедитесь, что строка занимает всю ширину родительского элемента
- измените
col-sm
s наcol-auto
- удалите из последнего
ml-auto
Ответ №3:
Я поместил значок и гамбургер внутри div и добавил d-flex no-gutters
к нему классы начальной загрузки и добавил ниже css
.brand-hamburger {
width: 100%;
}
.brand-hamburger {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
<div class="row no-gutters brand-hamburger">
<div class="col-sm">
<a class="navbar-brand" href="#" style="padding:0px;margin:0;">
<img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
</a>
</div>
<div class="d-flex no-gutters">
<div class="col-sm ml-auto">
<a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
<i class="fas fa-phone fa-2x"></i>
</a>
</div>
<div class="col-sm ml-auto">
<button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars fa-2x"></i>
</button>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Affiliations</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
Комментарии:
1. Это покажет «О нас», «Наша команда» и т. Д. В 2 строках, Проверьте полный просмотр страницы вашего ответа
Ответ №4:
Сделайте один родительский div внутри этого div, поместите оба значка используйте display: flex для родительского div и в строке div дайте ширину: 100% это будет работать и для мобильного устройства
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
<div class="row no-gutters" style="width: 100%;">
<div class="col-sm">
<a class="navbar-brand" href="#" style="padding:0px;margin:0;">
<img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
</a>
</div>
<div class="mobile-device" style="display:flex">
<div class="col-sm ml-auto">
<a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
<i class="fas fa-phone fa-2x"></i>
</a>
</div>
<div class="col-sm ml-auto">
<button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars fa-2x"></i>
</button>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Affiliations</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>