Question

我正在尝试将导航和注册按钮移到导航栏的右侧。我试过使用浮子，包含它的ul，对齐项目以及更多。这是我的代码

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Connect4</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>

      <ul ul class="nav mr-auto" style="float: none!Important;">
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link" href="#">Sign up</a>
        </li> 
      </ul>
      

    </ul>
  </div>
</nav>


</body>

</html>

Answer 1

只需在标签中添加 ml-auto 例如：

<ul class="ml-auto"><ul>

Answer 2

Bootstrap使用flexbox进行导航，这就是float，text-align等无法正常工作的原因。相反，您需要更改HTML结构，以将内部ul和按钮与主要ul分开，然后可以使用将Bootstrap类justify-content-between添加到导航栏中，例如

<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">

这告诉Bootstrap导航将2个ul元素与导航栏的两端对齐-请参见Boostrap Flex documentation

（注意，您也可以删除 style="float: none!Important;"内联样式）

工作段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Connect4</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up</a>
      </li>
    </ul>
  </div>
</nav>

Answer 3

您需要在div justify-content-between上使用(navbar-collapse)，并将login和sign-up ul放在第一个ul之外

<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">

演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Connect4</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
    <ul ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up</a>
      </li>
    </ul>
  </div>
</nav>

Answer 4

代码的问题是将ul都包裹在一个ul中。取2 ml-auto并将<ul class="navbar-nav mr-auto"> <ul class="navbar-nav ml-auto"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <nav class="navbar navbar-expand-md bg-dark navbar-dark">  <a class="navbar-brand" href="#">Connect4</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button>  <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Settings</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sign Out</a> </li> </ul> </div> </nav>应用于要向右推的那个。

<img src=".\styleCSS\images\Image_menu.jpg" style="float: right; background-size: cover; height : 100%; width: auto; position : absolute; left : 60.7%">

Bootstrap 4导航栏无法向右移动项目

4 个答案: