Question

使用Bootstrap 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（首页），我会得到：

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

当我单击以展开时，我得到了：

在完整模式下，我得到了：

我想要的是：

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

请告知。谢谢！

Answer 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

Answer 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

无法弄清楚如何在Bootstrap 4中更改导航栏

2 个答案: