如何在 <nav> bootstrap 中制作 2 行？

Question

我目前有以下导航：

 <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar" id="navbar">
      <div class="container">
        <b-navbar-toggle target="navbarContent">
          <font-awesome-icon :icon="['fas' , 'bars']" :style="{ color: 'black'}" />
        </b-navbar-toggle>
        <b-collapse id="navbarContent" is-nav>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#team">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </b-collapse>
      </div>
    </nav>

但应该是这样的：

你会看到，第一个是图片所在的有2行，另一个是电话和邮件等数据，下面一行是导航项。我尝试使用例如

<div class="container">
   <div class="row">
      <div class="col-md-12">
        <h1> row 1</h1
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <h1> row 1</h1
      </div>
    </div
 </div>

但对我不起作用，如果有人能提前支持我，非常感谢。

Answer 1

我从 bootstrap example

那里为你试过了

<header class="blog-header py-3">
      <div class="row flex-nowrap justify-content-between align-items-center">
        <div class="col-4 pt-1">
          <a class="text-muted" href="#">
            Subscribe
          </a>
        </div>
        <div class="col-4 text-center">
          <a class="blog-header-logo text-dark" href="#">
            Large
          </a>
        </div>
        <div class="col-4 d-flex justify-content-end align-items-center">
          <a class="text-muted" href="#">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              class="mx-3"
              role="img"
              viewBox="0 0 24 24"
              focusable="false"
            >
              <title>Search</title>
              <circle cx="10.5" cy="10.5" r="7.5"></circle>
              <path d="M21 21l-5.2-5.2"></path>
            </svg>
          </a>
          <a class="btn btn-sm btn-outline-secondary" href="#">
            Sign up
          </a>
        </div>
      </div>
    </header>

    <div class="nav-scroller py-1 mb-2">
      <nav class="nav d-flex justify-content-between">
        <a class="p-2 text-muted active" href="#about">
          About
        </a>
        <a class="p-2 text-muted" href="#projects">
          Projects
        </a>
        <a class="p-2 text-muted" href="#pricing">
          Pricing
        </a>
        <a class="p-2 text-muted" href="#team">
          Team
        </a>
        <a class="p-2 text-muted" href="#contact">
          Contact
        </a>
      </nav>
    </div>

这是输出

Answer 2

导航栏是 display:flex，所以你可以这样做...

https://www.codeply.com/p/1c5SioiLUY

<nav class="navbar navbar-expand navbar-light bg-light flex-column">
    <div class="col-12 d-flex justify-content-between">
        <a class="navbar-brand" href="#"><img src="//placehold.it/40"></a>
        <ul class="navbar-nav">
            <li class="nav-item mr-2">
                <a class="nav-link text-truncate" href="#">1 999 020-1200</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-truncate" href="#">foo@bar.com</a>
            </li>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse col-12" id="navbarNav">
        <ul class="navbar-nav nav-justified w-100">
            <li class="nav-item">
              <a class="nav-link active" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#team">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
    </div>
</nav>

如何在 <nav> bootstrap 中制作 2 行？

How to make 2 rows in <nav> bootstrap?

header

nav

bootstrap-4