twitter-bootstrap Bootstrap 4：带有徽标和 2 行的导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48999447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4: Navbar with logo and 2 rows
提问by Josh
I am trying to create a website header that conforms to the schematic below using Bootstrap 4:
我正在尝试使用 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.
唯一的自定义 CSS 是更改背景颜色以匹配原理图的背景颜色。
This results in the following rendered HTML page, where the row does not span the container:
这会产生以下呈现的 HTML 页面，其中该行不跨越容器：
However, in Bootstrap 3 this is not an issue. Only changing the framework to Bootstrap 3 gives the correct layout:
但是，在 Bootstrap 3 中，这不是问题。只有将框架更改为 Bootstrap 3 才能提供正确的布局：
Also, the correct layout can be achieved within Bootstrap 4 if the container (and its nested content) is removed from its navbar parent:
此外，如果容器（及其嵌套内容）从其导航栏父项中删除，则可以在 Bootstrap 4 中实现正确的布局：
What do I need to do within Bootstrap 4 to achieve this desired layout whilst still using the navbar class?
我需要在 Bootstrap 4 中做什么才能在仍然使用导航栏类的同时实现所需的布局？
采纳答案by Zim
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 contentwithout using the grid row>col-*.
Bootstrap 4 网格row>col-*不是为在导航栏中使用而设计的。这是支持的内容。现在 Bootstrap 4 使用了 flexbox，在不使用 grid > 的情况下对齐导航栏内容要容易得多。rowcol-*
If you want a Navbar with logo and 2 rows, see this answer:
Bootstrap 4 navbar with 2 rows
如果您想要带有徽标和 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="#">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
2 行基本导航栏：https: //www.codeply.com/go/ilJBKjJsEy
Responsive Navbar with 2 rows: https://www.codeply.com/go/DsfePuoZy0
2 行响应式导航栏：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 classesto position elements as desired. There are manyways to achieve what you want: https://www.codeply.com/go/pGE8fTf9dM
第二个示例在小屏幕上折叠为移动堆叠菜单，可以使用汉堡图标进行切换。使用flexbox 和间距实用程序类根据需要定位元素。有很多方法可以实现您想要的：https: //www.codeply.com/go/pGE8fTf9dM
回答by WebDevBooster
You can use 2 navbar-navelements and then stack them up by using the flex-columnclass like so:
您可以使用 2 个navbar-nav元素，然后使用flex-column类将它们堆叠起来，如下所示：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://picsum.photos/140/70" width="140" height="70" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarCollapse">
<!-- navbar1 -->
<div class="navbar-nav mb-lg-0">
<a class="nav-item nav-link" href="#">(00) 1234567</a>
</div>
<!-- navbar2 -->
<ul class="navbar-nav mt-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Free Cookies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>