更新

Question

我想使用Twitter Bootstrap布置我的导航栏，使其中有“左”，“中”和“右”部分，中间部分在navbar-toggler（“汉堡”下折叠菜单“）没有足够的空间。

Codepen的自包含示例：https://codepen.io/fiver/pen/eKJOMG

我错误的部分（我认为）是“图标”元素的定义：

<nav className="navbar navbar-expand-sm navbar-dark bg-dark ">
  <a className="navbar-brand" href="#">ExampleApp</a>
  <button className="navbar-toggler" type="button"
    data-toggle="collapse" 
    data-target="#navbarNav" >
    <span className="navbar-toggler-icon"/>
  </button>

  <a className="navbar-brand navbar-right" href="#">Icon1</a>

  <div id="navbarNav" className="collapse navbar-collapse" >
    <ul className="navbar-nav">
      <li nav items></li>
      ....
    </ul>
  </div>

  <a className="navbar-brand navbar-right" href="#">Icon2</a>
</nav>

当有足够的水平空间不需要导航栏切换时，Icon1位置错误：

但是当navbar-toggler处于有效状态且菜单展开时，Icon2位置错误：

目前，我只打算在我的应用中使用其中一个Icon菜单项。我在这里使用两个来说明当我将图标放在两个不同的地方时的不同行为。

请注意，当navbar-toggler菜单处于活动状态但折叠时，这两个展示位置似乎都按照我想要的方式运行：

当空间有限时，如果空间有很多空间Icon2和navbar-toggler，我需要做什么才能使图标像Icon1一样？

Answer 1

使用d-flex和justify-content-between代表navbar-container。
w-100

nav

在<a class="navbar-brand navbar-right" href="#">Icon1</a>锚标记后面使用ExampleApp。
ml-auto

navbar-toggler

在<a class="navbar-brand navbar-right pt-2" href="#">Icon2</a>标记后使用nav。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />

<div style="background-color: rgb(52, 58, 64);">
  <div id="navbar-container" class="container d-flex justify-content-between">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark  w-100">
      <a class="navbar-brand" href="#">ExampleApp</a><a class="navbar-brand navbar-right" href="#">Icon1</a>
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarNav" class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">Item 1</a></li>
          <li class="nav-item "><a class="nav-link" href="#">Item 2</a></li>
          <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Options</a>
            <div class="dropdown-menu"><a class="dropdown-item" href="#">Drop Item 1</a><a class="dropdown-item" href="#">Drop Item 2</a>
              <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Drop Item 3</a></div>
          </li>
        </ul>
      </div>
    </nav><a class="navbar-brand navbar-right pt-2" href="#">Icon2</a></div>
</div>

＆＃13;

https://codepen.io/anon/pen/NzxqxW

更新

如果要对齐右侧的icons，请使用此方法。

使用d-flex和justify-content-between代表navbar-container。
w-100

nav

ml-auto使用navbar-toggler。
在d-flex justify-content-between之外为这两个图标创建一个新的nav div。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />

<div style="background-color: rgb(52, 58, 64);">
  <div id="navbar-container" class="container d-flex justify-content-between">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark  w-100">
      <a class="navbar-brand" href="#">ExampleApp</a>
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarNav" class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">Item 1</a></li>
          <li class="nav-item "><a class="nav-link" href="#">Item 2</a></li>
          <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Options</a>
            <div class="dropdown-menu"><a class="dropdown-item" href="#">Drop Item 1</a><a class="dropdown-item" href="#">Drop Item 2</a>
              <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Drop Item 3</a></div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="d-flex justify-content-between pt-2">
      <a class="navbar-brand navbar-right" href="#">Icon1</a>
      <a class="navbar-brand navbar-right" href="#">Icon2</a></div>
  </div>
</div>

＆＃13;

https://codepen.io/anon/pen/RJrxpL

Bootstrap4导航栏：如何右键对齐图标并使其远离切换？

1 个答案:

更新