使用引导程序将导航栏向右对齐

Posted 2023-03-06

【中文标题】使用引导程序将导航栏向右对齐

【英文标题】：Align nav-bar to the right using bootstrap

【发布时间】：2022-01-06 16:16:54

【问题描述】：

我正在尝试将导航栏组件向右对齐。代码如下。我试过了 ml-auto 但它没有给出预期的结果。我得到的结果附在下面。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<header class="bg-info">
  <div class="row text-white">
    <div class="col-md-6 col-9 p-3 pl-5">
      <h2>Header</h2>
    </div>
    <div class="col-md-6 col-3 my-auto ml-auto">
      <nav class="navbar navbar-expand-lg navbar-light">
        <button class="navbar-toggler ml-auto" type="button" data-bs-toggle="collapse" data-bs-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">
          <!-- me-auto mb-2 mb-lg-0 -->
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active text-white" aria-current="page" href="#">Home</a
                  >
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="#">Know More</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="#">Actions</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="#">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="#">Contact Us</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>

结果 我希望家，了解更多，等等。内容是右对齐的。我最初将它分为两​​列。然后给第二个 ml-auto 类。这里有什么问题？

【问题讨论】：

我已将您的代码转换为功能性的 sn-p。如您所见（在整页演示中），它可以按您的意愿工作。显然，情况比您所展示的要多。

@Pieterjan，这是不正确的。很少会出现这种情况。此外，浮动是一种古老的技术，应该避免使用。

【参考方案1】：

我在 *** 中检查了 safari、chrome、firefox 和 sn-p 检查器。

所有样式都显示正确，而不是您截屏的样式。也许你有一个注入某种自定义 CSS 的扩展？或者您没有正确加载引导文件？

您的字体在屏幕截图中似乎也有点偏离。

我的 Chrome 是什么样子的：

【讨论】：

欢迎。您不应发布无法回答的问题的答案。

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

可能很容易。删除所有ml-auto，然后使用d-flex 到justify-content-end（右）。 justify-content-start 是左边。但是....正如其他人指出的那样。当我尝试您的代码时 - 您的菜单位于右侧，标题位于左侧。

<nav class="navbar navbar-expand-lg navbar-light d-flex justify-content-end">