时间戳

首页 > 解决方案 > 在添加容器后的引导 4 导航栏中，内容自动右对齐

html - 在添加容器后的引导 4 导航栏中，内容自动右对齐

问题描述

您好，我是引导程序的新手，所以如果这个问题太天真，我深表歉意。我正在尝试使用引导程序制作导航栏，但在导航标签内添加容器类后，徽标保持在左侧，但链接右对齐。我希望链接保留在右侧的徽标旁边，并且仅登录并注册以对齐。我写的代码在下面 这是导航栏的图像，其中链接自动对齐到右侧

<nav class="navbar bg-dark navbar-expand-md py-0">
    <div class="container">
        <a class="navbar-brand" href="index.html">
            <img src="https://www.w3schools.com/bootstrap4/bird.jpg" alt="logo" style="width:40px;">
        </a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Subscriptions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">FAQs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sign In</a>
                </li>
            </ul>
    </div>
</nav>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

注册和登录与下面的代码对齐。将 classsignup和signinclass 添加到相应的nav-itemHTML 代码中。然后，添加 CSS 代码。

<li class="nav-item signup">
<li class="nav-item signin">


.nav-item.signup {
  position: absolute;
  right: 70px;
}

.nav-item.signin {
  position: absolute;
  right: 0;
}

@media (max-width: 767.98px) {
  .nav-item.signup,
  .nav-item.signin {
    position: unset;
    right: unset;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar bg-dark navbar-expand-md py-0">

  <a class="navbar-brand" href="index.html">
    <img src="https://www.w3schools.com/bootstrap4/bird.jpg" alt="logo" style="width:40px;">
  </a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Subscriptions</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">FAQs</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>
    <li class="nav-item signup">
      <a class="nav-link" href="#">Sign Up</a>
    </li>
    <li class="nav-item signin">
      <a class="nav-link" href="#">Sign In</a>
    </li>
  </ul>
</nav>

推荐阅读