药丸必须右对齐，只有在笔记本电脑和留在电话和我的代码是:笔记本模式
电话模式
代码
null
<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>  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>null
这是你所期待的吗？
null
<style>
@media(min-width: 500px) {
.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">
<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">
<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;">Navbar</h1>
</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"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<br>
<div class="nav nav-pills flex-sm-column">
<a class="float-right text-sm nav-link" aria-current="page" href="home.php">Home</a>
<a class=" float-right text-sm nav-link" href="register.php">Register</a>
<a class="float-right text-sm nav-link" href="login.php">Login</a>
</div>
</div>
</div>
</nav>
默认情况下，
您可能希望将
.nav-pills {
text-align: right;
}
或者将
