0

药丸必须仅在笔记本电脑中右对齐并留在手机上，我的代码是：笔记本电脑 模式

电话模式

代码

<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>

4

2 回答 2

0

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

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

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

或者，您可以通过添加display: block来应用a并使其与其父级一样宽width: 100%- 在这种情况下，该text-align设置将适用于a标签本身。

于 2020-12-30T14:21:40.360 回答
0

这是你所期待的吗？

我添加了justify-content-end课程

<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>

于 2020-12-30T14:15:54.323 回答