展开可折叠导航栏时如何为导航项添加填充 Bootstrap 5
[英]How to add padding to nav-items when collapsible navbar is expanded Bootstrap 5
问题描述
Below I have code that generates a collapsible Bootstrap 5 navbar that has the buttons on the right instead of on the left however you will notice that when expanding the navbar that the nav items don't have nice padding/margins how do I write CSS rules for nav items when they are expanded only?
下面我的代码生成了一个可折叠的 Bootstrap 5 导航栏，其按钮在右侧而不是左侧，但是您会注意到，在扩展导航栏时，导航项目没有很好的填充/边距，我该如何编写 CSS 规则导航项目仅在扩展时？
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap:min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <.-- Bootstrap Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="index.php">Document</a> <div class="d-flex align-items-center"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto"> <form name="logout" class="logout ms-auto" action="PHP/Logout.php" method="get"> <button type="submit" class="btn btn-danger">Log Out</button> </form> </ul> </div> </div> </nav> </body> </html>
3 个解决方案
解决方案1
0 2021-03-29 02:17:42
You can use built-in BS5 padding and margin classes.您可以使用内置的 BS5 填充和边距类。 Try below code.试试下面的代码。 Let me know if you succeed.让我知道你是否成功。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand mr-5 mb-2 p-3" href="index.php">Document</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto ml-5 p-3">
<form name="logout" class="logout ms-auto" action="PHP/Logout.php" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
</ul>
</div>
</div>
</nav>
</body>
</html>
解决方案2
0 2021-03-29 04:00:08
The simple way would be to style the element like this简单的方法是像这样设置元素的样式
#id-of-your-element{
padding:50px !important;
}
The !important tag will override the default padding set by Bootstrap !important 标签将覆盖 Bootstrap 设置的默认填充
解决方案3
0 2021-03-29 10:23:04
You only want the padding on mobile (less than sm ) so use py-sm-0 py-3 for vertical padding on the form..您只需要移动设备上的填充（小于sm ），因此请使用py-sm-0 py-3在表单上进行垂直填充..
<form name="logout" class="logout ms-auto py-sm-0 py-3" action="/echo" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.