如何将导航栏链接向右对齐答案

【问题标题】：How to align navbar links to the right如何将导航栏链接向右对齐
【发布时间】：2019-07-29 13:15:59
【问题描述】：

我正在为作业创建登录页面。要求之一是有一个至少有 3 个按钮的导航栏。我做到了，但是导航链接没有在视口的右侧对齐。

我尝试了许多 css 属性来对齐它们，例如浮动、位置。引导类 mr-right 但似乎没有任何效果。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<header id="header">
  <div class="nav-bar">
    <nav class="navbar navbar-expand" style="background-color: #F05204">
      <div id="logo">
        <a href="#">
          <img src="https://media.glassdoor.com/sqll/807564/enhancesys-innovation-solutions-pvt-ltd-squarelogo-1449759499797.png" alt="">
        </a>
      </div>
      <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">
        <ul class="navbar-nav mr-auto">
          <li id="1" class="nav-item active">
            <a href="#presentation" class="nav-link">Home</a>
          </li>
          <li id="2" class="nav-item active">
            <a href="#" class="nav-link">Our Product</a>
          </li>
          <li id="3" class="nav-item active">
            <a href="#" class="nav-link">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>
<div class="container">
  <div class="presentation">
    <h2 class="h2">
      Sales Network Operations Center (S-NOC)
    </h2>
    <p class="h5 text-muted">
      Automated Transparency
    </p>
    <p id="description">
      Wish to have visibility and control over your Extensive Sales and Distribution network? Develop a highly efficient and automated sales and distribution channel by ensuring proper stock management across the network.
    </p>
  </div>
  <div id="prod-video">
    <p>To know more about our product, please check-out the vide</p>
    <iframe src="https://www.youtube.com/embed/R6zd9ZRd0nU?showinfo=0&rel=0" width="600" height="400" frameborder="0"></iframe>
  </div>
  <div class="form-container">
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input type="email" name="email" placeholder="Enter your email here..." required>
      <input class="btn-primary" id="submit" type="button" value="Submit">
    </form>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

.navbar-nav{
    justify-content: flex-end;
    width: 100%;
}

【讨论】：

【解决方案2】：

将 mr-auto 更改为 ml-auto 当您希望 navbar-nav 向右推时，您应该使用 ml-auto。

如果你想在 navbar-nav 的右边添加一些空间，你可以添加 mr-md-5

【讨论】：

【解决方案3】：

这是因为您正在使用所有库类并将它们分配给链接，因此当您要通过自定义类应用新更改时，它不起作用。

尝试应用自定义类并确保您没有将库中的类用于该标签的子类

【讨论】：

【解决方案4】：

在这一行：

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

将mr-auto 更改为ml-auto

【讨论】：

【解决方案5】：

请尝试这些步骤..

css

.navbar-nav {
    width: 100%;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

【讨论】：