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网格row＆gt; col-*未设计为在Navbar中使用。这是supported content。现在Bootstrap 4使用了flexbox，在不使用网格row＆gt; col-*的情况下align Navbar content更容易。

如果您想要带有徽标和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>

<强>示例：

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

有两行的响应式导航栏：https://www.codeply.com/go/DsfePuoZy0

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

Bootstrap 4：带有徽标和2行的Navbar

1 个答案: