时间戳

首页 > 解决方案 > Bootstrap4 导航栏：如何右对齐图标并将其排除在切换之外？

css - Bootstrap4 导航栏：如何右对齐图标并将其排除在切换之外？

问题描述

我想使用 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位置错误：

图标 1 在错误的位置

但是，当 处于navbar-toggler活动状态并且菜单已展开时，Icon2位于错误的位置：

在此处输入图像描述

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

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

在此处输入图像描述

Icon2当空间很大navbar-toggler且Icon1空间有限时，我需要做什么才能使图标表现得像？

标签： csstwitter-bootstrapbootstrap-4

解决方案

  • 使用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 标签之后使用。

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

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之外创建一个新的div。nav

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

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

推荐阅读