Navpills 在媒体中右对齐最小宽度:900px
Navpills to be aligned on right in media min-width: 900px
药丸只能在笔记本电脑上右对齐并留在 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>  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>
这是您所期待的吗?
我添加了justify-content-end
class
<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>  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>
<a>
默认情况下是一个 inline 元素 - text-align
不会对其产生任何影响,因为内联元素仅与它们的内容一样长.
您可能想将 text-align
应用于 a
标签的父级,如下所示:
.nav-pills {
text-align: right;
}
或者您将 display: block
应用到 a
并通过添加 width: 100%
使其与其父级一样宽 - 在这种情况下 text-align
设置将适用于 a
标记自己。
药丸只能在笔记本电脑上右对齐并留在 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>  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>
这是您所期待的吗?
我添加了justify-content-end
class
<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>  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>
<a>
默认情况下是一个 inline 元素 - text-align
不会对其产生任何影响,因为内联元素仅与它们的内容一样长.
您可能想将 text-align
应用于 a
标签的父级,如下所示:
.nav-pills {
text-align: right;
}
或者您将 display: block
应用到 a
并通过添加 width: 100%
使其与其父级一样宽 - 在这种情况下 text-align
设置将适用于 a
标记自己。