Navpills 在媒体中右对齐最小宽度：900px

Question

药丸只能在笔记本电脑上右对齐并留在 phone 上，我的代码是： LAPTOP MODE

PHONE MODE

Code

<style>@media(min-width: 576px){ .nav-pills > a{ text-align: left; } } @media(min-width: 900px){ .nav-pills > a{ text-align: right; } }</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <!-- JavaScript Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"/>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <h1 style="font-family:Tangerine;">IgniteShare</h1>
                    <small>&emsp;&emsp;ReInvent Your Memories</small>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"/>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <br>
                        <div class="nav nav-pills flex-column flex-sm-row">
                            <a class="flex-sm-fill text-sm nav-link" aria-current="page" href="home.php">Home</a>
                            <a class="flex-sm-fill text-sm nav-link" href="register.php">Register</a>
                            <a class="flex-sm-fill text-sm nav-link" href="login.php">Login</a>
                        </div>
                    </div>
                </div>
            </nav>

Answer 1

这是您所期待的吗？

我添加了justify-content-endclass

<style>
  @media(min-width: 576px) {
    .nav-pills>a {
      text-align: left;
    }
  }
  
  @media(min-width: 900px) {
    .nav-pills>a {
      text-align: right;
    }
  }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <h1 style="font-family:Tangerine;">IgniteShare</h1>
      <small>&emsp;&emsp;ReInvent Your Memories</small>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"/>
                </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
      <br>
      <div class="nav nav-pills flex-column flex-sm-row">
        <a class="flex-sm-fill text-sm nav-link" aria-current="page" href="home.php">Home</a>
        <a class="flex-sm-fill text-sm nav-link" href="register.php">Register</a>
        <a class="flex-sm-fill text-sm nav-link" href="login.php">Login</a>
      </div>
    </div>
  </div>
</nav>

Answer 2

<a> 默认情况下是一个 inline 元素 - text-align 不会对其产生任何影响，因为内联元素仅与它们的内容一样长.

您可能想将 text-align 应用于 a 标签的父级，如下所示：

.nav-pills {
    text-align: right;
}

或者您将 display: block 应用到 a 并通过添加 width: 100% 使其与其父级一样宽 - 在这种情况下 text-align 设置将适用于 a 标记自己。

Navpills 在媒体中右对齐最小宽度：900px

Navpills to be aligned on right in media min-width: 900px

css

flexbox

navbar

text-alignment

nav-pills