Question

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

我尝试了许多css属性以将它们对齐，例如float，position。引导程序类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>

Answer 1

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

Answer 2

之所以发生这种情况，是因为您正在使用所有库类并将它们分配给链接，因此，当您要按自定义类应用新更改时，它将不起作用。

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

Answer 3

将MR-AUTO更改为ML-AUTO 当您想将导航栏导航到右侧时，应使用ml-auto。

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

Answer 4

在这一行：

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

将mr-auto更改为ml-auto

Answer 5

请尝试这些步骤。

css

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

如何将导航栏链接右对齐

5 个答案: