Bootstrap 4 float-right 不适用于导航栏[重复]

Posted 2023-03-06

【中文标题】Bootstrap 4 float-right 不适用于导航栏[重复]

【英文标题】：Bootstrap 4 float-right not working with the navbar [duplicate]

【发布时间】：2018-03-17 18:09:13

【问题描述】：

这是代码。我需要将导航栏（不带徽标）移到右侧。

所以我添加了 float-right 来点赞<div class="collapse navbar-collapse float-right" id="navbarSupportedContent">。

但是没有用。

完整代码

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Popular Quotes Collection</a>
      <button class="navbar-toggler" 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 float-right" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <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="#">Submit a Quote</a>
          </li>
        </ul>
      </div>
    </nav>

【参考方案1】：

只需添加：

.justify-content-end 到 .navbar-collapse

移除浮动，bootstrap 4 默认为 flexbox，因此您可以利用这一点。

像这样：

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">

Working Resizable Fiddle

【参考方案2】：

您实际上根本不需要申请float-right，而是navbar-toggler-right：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Popular Quotes Collection</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">Toggle</span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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="#">Submit a Quote</a>
      </li>
    </ul>
  </div>
</nav>

希望这会有所帮助！ :)

【讨论】：

感谢您的回答。但它不起作用，因为标志也向右。徽标应在左侧，其他 munu 应在右侧

那么可折叠的下拉菜单应该是右边唯一的吧？

这样的。请看截图。 image.ibb.co/hpVcdw/32323222222.png

我已经更新了我的答案以涵盖这一点:)

【参考方案3】：

你不能使用 float 因为 bs4 使用 display: flex; 您可以使用 class: 'justify-content-between' 或在此页面上获取有关 bootstrap4 flex 类的更多信息https://getbootstrap.com/docs/4.0/utilities/flex/