Javascript 如何右对齐导航栏中的文本-HTML

---

您可以使用类

mr auto

将元素固定到右侧

您的代码将成为：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

学习和使用

它是一个非常强大的css布局库，大多数浏览器都支持它

查看此处导航栏的示例。有很多方法可以正确对齐。一种方法是在导航元素的左侧有一个空元素，它占据剩余的空间，将元素一直推到右侧

要实现这一点，请参见Bootstrap示例

我所做的只是添加

<div style="flex-grow: 1;"></div>

就在下面

<div class="collapse navbar-collapse" id="navbarSupportedContent">

就在上面

<ul class="navbar-nav mr-auto">

如果您只想使用引导功能，可以通过以下方式包装链接来实现：

<ul class="nav navbar-nav navbar-right">
  <links>
</ul>

请将相关代码片段与您的问题一起发布。在SO中不鼓励使用外部链接中的代码段。请在您的

中使用类ml auto：Andrew L我刚刚做了@克里斯·G：好吧，这样就行了！但我不知道为什么它会起作用。你能解释一下吗？为什么我不能做浮动：就在ul下？我使用了
而不是第7行。奇怪的是，Bootstrap没有使用float（我不知道）。它使用具有相同效果的

左边距：auto

。要应用的类是

ml auto

，如下所述：谢谢！能告诉我如何在没有引导功能的情况下完成吗？@user7552492当然可以，就这样，功能齐全，无需引导定位。如果答案能解决你的问题，别忘了接受，谢谢！嘿，没有使用引导的部分似乎不起作用。@user7552492您需要确保

清除：两者

在您试图浮动的

div

之外，您需要将CSS类应用于HTML，就像我在我的示例中所做的那样。另外，确保添加

。（它在我的代码中不使用
；
，因为在
{}中只发生一件事
。我做了所有这些，但出于某种原因，它在我的代码中不起作用。我想我会满足于ml auto。顺便说一句，你给我的关于如何使用引导功能实现这一点的代码也不起作用。只有ml auto起作用非常确定你在最后一行是指ml auto。谢谢！@user7552492你可以使用
ml auto
，它只应用了m左边，这是另一条路。