html - Bootstrap 4 : Navbar with logo and 2 rows

Question

我正在尝试使用 Bootstrap 4 创建一个符合以下示意图的网站标题:

我用来实现此目的的代码如下(省略无关代码):

<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>

唯一的自定义 CSS 是更改背景颜色以匹配原理图的颜色。

这会生成以下呈现的 HTML 页面，其中行不跨越容器:

但是，在 Bootstrap 3 中，这不是问题。只有将框架更改为 Bootstrap 3 才能提供正确的布局:

此外，如果容器(及其嵌套内容)从其父级导航栏中移除，则可以在 Bootstrap 4 中实现正确的布局:

我需要在 Bootstrap 4 中做什么才能在仍然使用导航栏类的同时实现所需的布局？

Answer 1

Bootstrap 4 网格 rowcol-* 并非设计用于导航栏内。这是 supported content 。现在 Bootstrap 4 使用 flexbox，不使用网格 rowcol-* align Navbar content 就容易多了。

如果您想要一个带有 Logo 和 2 行的导航栏，请参阅此答案:
https://stackoverflow.com/questions/42635126/bootstrap-4-navbar-with-2 -行

<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>

示例:

2 行的基本导航栏:https://codeply.com/go/ilJBKjJsEy

具有 2 行的响应式导航栏:https://codeply.com/go/DsfePuoZy0

第二个示例折叠成小屏幕上的移动堆叠菜单，可以使用汉堡包图标进行切换。使用 flexbox and spacing utility classes 根据需要定位元素。有很多方法可以实现你想要的:https://www.codeply.com/go/pGE8fTf9dM