![Utility]( "Utility")
本文介绍了如何将品牌和导航栏放在不同的行上?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
很简单，但我对 Bootstrap 相当业余.
我了解如何使用图像作为品牌和导航项目制作导航栏.在不破解的情况下，是否有适当的方法将品牌定位在扩展导航上方?
主要是找这个；
扩展-----------------------------------------|标志 |-----------------------------------------|首页 关于我们 联系方式 |-----------------------------------------倒塌-----------------|标志 ≡ |-----------------<a class="navbar-brand" href="#"><img src="img/logo.png" alt="Logo" height="80px" width="auto"></a><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">首页</a><li class="nav-item"><a class="nav-link" href="#">关于</a><li class="nav-item"><a class="nav-link" href="#">联系方式</a></nav>
解决方案
使用 flex-column 使导航栏项目堆叠成 2 行(行).
- 将徽标分组在 1 个 flexbox div 中一起切换开关 (
d-flex w-100) - 使用
mx-md-auto(自动边距)将徽标居中放置在更大的宽度上 - 使用
text-center 将 navbar-nav 中的项目居中
https://www.codeply.com/go/W9HQcd3Pyw
<div class="w-100 d-flex"><a class="navbar-brand mx-md-auto" href="#"><img src="img/logo.png" alt="Logo" height="80px" width="auto"></a><button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse"><span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse"><ul class="navbar-nav text-center"><li class="nav-item"><a class="nav-link" href="#">首页</a><li class="nav-item"><a class="nav-link" href="#">关于</a><li class="nav-item"><a class="nav-link" href="#">联系方式</a>
</nav>
阅读有关导航栏和Utility 类.
相关问题
如何在 Boostrap 4 中居中导航栏徽标下面带有导航链接
引导程序 4:带有徽标和 2 行的导航栏
具有 2 行和内联表单的 Bootstrap 4 导航栏
Pretty simple, but I'm fairly amateur with Bootstrap.
I understand how to make the navigation bar with an image as the brand and the nav-items. Without hacking it, is there a proper way to have the brand positioned above the expanded navigation?
Basically looking for this;
EXPANDED
-----------------------------------------
| Logo |
-----------------------------------------
| Home About Contact |
-----------------------------------------
COLLAPSED
-----------------
| Logo ≡ |
-----------------
<nav class="mainNav navbar navbar-expand-md justify-content-center">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
解决方案
Use flex-column to make the navbar items stack in 2 rows (lines).
- group the logo & toggler together in 1 flexbox div (
d-flex w-100) - use
mx-md-auto (auto-margins) to center the logo on larger widths - use
text-center to center items in the navbar-nav
https://www.codeply.com/go/W9HQcd3Pyw
<nav class="mainNav navbar navbar-expand-md navbar-light flex-column">
<div class="w-100 d-flex">
<a class="navbar-brand mx-md-auto" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Read more about the Navbar and Utility classes in the Bootstrap 4 docs.
Related questions
How to centre navbar logo in Boostrap 4 with nav-links below
Bootstrap 4: Navbar with logo and 2 rows
Bootstrap 4 navbar with 2 rows and inline form
这篇关于如何将品牌和导航栏放在不同的行上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..