Bootstrap 4 导航栏下拉菜单项右侧 - Html

Bootstrap是一个受欢迎的前端框架，它为开发人员提供了许多设计良好的组件。其中一个很有用的组件是下拉菜单，可以在导航栏中轻松实现下拉菜单。在本文中，我们将探讨如何为Bootstrap 4导航栏下拉菜单项添加右侧内容。

准备工作

在向导航栏中添加下拉菜单前，请确保正确包含Bootstrap样式表和脚本。可通过Bootstrap官方网站来获得最新的Bootstrap版本。在开始前，我们建议您对Bootstrap和HTML/CSS有一定的了解。

添加下拉菜单

首先，让我们看一下如何在导航栏中创建一个下拉菜单。使用以下代码可以创建一个导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

在这个导航栏中，我们已经添加了一个下拉菜单，它是通过一个带有“.dropdown”的列表项来实现的。当用户点击这个列表项时，该下拉菜单将会展开。

在下拉菜单项右侧添加内容

有时候，我们希望在下拉菜单项的右侧添加一些内容。在Bootstrap 4中，我们可以通过在下拉菜单元素中添加任何HTML内容来完成这个任务。

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <span class="dropdown-item-text">Some text here</span>
    <a class="dropdown-item" href="#">
      <img src="icon.png" alt="Icon">Icon
    </a>
  </div>
</li>

在这个代码中，我们已经添加了一些额外的下拉菜单项，包括一个指定为“.dropdown-item-text”的Span元素和一个带有图标的“.dropdown-item”链接。

结论

通过按照上述方式使用Bootstrap 4，您可以轻松地在导航栏下拉菜单项右侧添加内容。除了上述示例中的内容，还可以添加其他元素，例如按钮，表单等等。希望本文能对您有所帮助，同时地，也希望您能尽情地使用Bootstrap的强大功能。