无法弄清楚如何在引导程序 4 中更改导航栏答案

【问题标题】：Can't figure out how to change navbar in bootstrap 4无法弄清楚如何在引导程序 4 中更改导航栏
【发布时间】：2023-03-28 00:48:01
【问题描述】：

使用引导程序 4。

我有这个用于导航栏的 HTML：

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Home </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2 my-sm-0" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    <button *ngIf="!isSignedIn" (click)="signIn()" class="btn btn-danger my-2 my-sm-0" type="submit">SignIn</button>
      <button *ngIf="isSignedIn" (click)="signOut()" class="btn btn-danger my-2 my-sm-0" type="submit">SignOut</button>
  </div>
</nav>

在折叠状态下它看起来像这样：

如果我删除 navbar-brand (Home)，我会得到：

问题1：由于某种原因，“展开”被移到了左侧

当我点击展开时，我得到了这个：

在完整模式下我得到了这个：

我想要的是：

展开按钮（汉堡图标）即使在我删除导航栏品牌文本时也保持在右侧。
红色的SignOut按钮位于右侧。
带有搜索按钮的搜索表单留在左侧，没有导航栏品牌（主页）文本
最后一件事 - 是否有可能使整个导航栏更薄一点，只使用引导程序？我知道这可以用css来完成。

请指教。谢谢！

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

使用ml-auto (margin-left:auto) 将按钮向右推...

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2 my-sm-0" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <button class="btn btn-danger my-2 my-sm-0 ml-auto" type="submit">SignOut</button>
    </div>
</nav>

https://www.codeply.com/go/UG0l2aoHNs

另见：Bootstrap 4 align navbar items to the right

【讨论】：

【解决方案2】：

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <!-- You will need to add a non breaking space '&nbsp;' so when you remove the nav-band the hamburger icon holds in place-->
    <a class="navbar-brand" href="#">Home </a> &nbsp;

    <!-- Add mr-0 class to the hamburger icon to set its margin right to 0px-->
    <button class="navbar-toggler navbar-toggler-right mr-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Place the form in a navbar-nav class then ensure the form has a nav-item class-->
      <ul class="navbar-nav mr-auto">
        <form class="form-inline nav-item">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </ul>
      <!-- Add the 2 buttons in a nav-item -->
      <ul class="navbar-nav my-2 my-lg-0">
        <li class="nav-item ">
          <button *ngIf="!isSignedIn" (click)="signIn()" class="btn btn-danger mr-1" type="submit">SignIn</button>
        </li>
        <li class="nav-item pt-sm-1 pt-xs-1">
          <button *ngIf="isSignedIn" (click)="signOut()" class="btn btn-danger" type="submit">SignOut</button>
        </li>
      </ul>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

这是答案 1、2、3 的代码尖顶。不确定您是否只能从引导程序中完成问题 4。

请检查Bootstrap Navbar、Bootstrap Spacing 和非破坏空间&nbsp

【讨论】：