Bootstrap 4：带有徽标和2行的导航栏 [英] Bootstrap 4: Navbar with logo and 2 rows
问题描述
我尝试使用Bootstrap 4创建一个符合下面原理图的网站标题：
然而，在Bootstrap 3中这不是问题。只有将框架更改为Bootstrap 3才能给出正确的布局：
另外，如果容器（及其嵌套内容）从其导航栏父级中移除，则在Bootstrap 4中可以实现正确的布局： a href =https://i.stack.imgur.com/LZYdY.png =nofollow noreferrer>
在Bootstrap 4中需要做什么来实现这种所需布局，同时仍然使用导航栏4 行> <$>
row > col - * 。 如果您需要 2行，请参阅此答案：
Bootstrap 4 navbar with 2 rows
< nav class =navbar navbar-expand navbar-dark fixed-top bg-dark>
< div class =container>
< h1 class =mb-0>< a href =＃>徽标< / a>< / h1>
< div class =d-flex flex-column flex-wrapid =navbarCollapse>
< span class =navbar-text ml-auto py-0 px-lg-2>（00）1234 5678< / span>
< ul class =navbar-nav mb-auto mt-0 ml-auto>
< li class =nav-item active>
< a class =nav-link py-0href =＃>主页< / a>
< / li>
< li class =nav-item>
< a class =nav-link py-0href =＃>产品< / a>
< / li>
< li class =nav-item>
< a class =nav-link py-0href =＃>公司< / a>
< / li>
< li class =nav-item>
< a class =nav-link py-0href =＃>博客< / a>
< / li>
< / ul>
< / div>
< / div>
< / nav>
示例：
2行基本导航栏： https://www.codeply.com/go/ilJBKjJsEy
2行响应式导航栏： https ：//www.codeply.com/go/DsfePuoZy0
第二个示例折叠成小屏幕上的移动堆叠菜单，可以使用汉堡包进行切换图标。使用柔性盒和间隔实用程序类根据需要定位元素。有很多方式可以实现您的目标： https：//www.codeply .com / go / pGE8fTf9dM
I am trying to create a website header that conforms to the schematic below using Bootstrap 4:
The code I am using to achieve this is as follows (extraneous code omitted):
<div class="navbar">
<div class="container yellow">
<div class="row">
<div class="col-sm-4 green">Logo</div>
<div class="col-sm-8 green">
<div class="row">
<div class="col text-right red">
(00) 1234 5678
</div>
</div>
<div class="row">
<div class="col text-right red">
<!-- nav links here -->
<a href="#">link</a>
</div>
</div>
</div>
</div>
</div>
</div>
The only custom CSS is to change the background colours to match those of the schematic.
This results in the following rendered HTML page, where the row does not span the container:
However, in Bootstrap 3 this is not an issue. Only changing the framework to Bootstrap 3 gives the correct layout:
Also, the correct layout can be achieved within Bootstrap 4 if the container (and its nested content) is removed from its navbar parent:
What do I need to do within Bootstrap 4 to achieve this desired layout whilst still using the navbar class?
The Bootstrap 4 grid row>col-* aren't designed to be used inside the Navbar. Here is the supported content. Now that Bootstrap 4 uses flexbox, it's much easier to align Navbar content without using the grid row>col-*.
If you want a Navbar with logo and 2 rows, see this answer:
Bootstrap 4 navbar with 2 rows
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container">
<h1 class="mb-0"><a href="#">Logo</a></h1>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<span class="navbar-text ml-auto py-0 px-lg-2">(00) 1234 5678</span>
<ul class="navbar-nav mb-auto mt-0 ml-auto">
<li class="nav-item active">
<a class="nav-link py-0" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Company</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Examples:
Basic Navbar with 2 rows: https://www.codeply.com/go/ilJBKjJsEy
Responsive Navbar with 2 rows: https://www.codeply.com/go/DsfePuoZy0
The 2nd example collapses into a mobile stacked menu on small screens that can be toggled using the hamburger icon. Use the flexbox and spacing utility classes to position elements as desired. There are many ways to achieve what you want: https://www.codeply.com/go/pGE8fTf9dM
这篇关于Bootstrap 4：带有徽标和2行的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
