如何使用 Bootstrap 将边距正确应用于导航栏而不影响导航栏折叠？
[英]How to apply margin right to nav bar not affecting the navbar collapse using Bootstrap?
问题描述
目标：
我的目标是使用标记为红色的填充或边距将nav bar项目放置到此位置：
问题
我意识到如果我应用一些padding right或margin right ，折叠的（移动屏幕） li项目会应用margin right或padding-right 。
这是一个应用高padding的荒谬示例：
目标：
这是所需的输出：
最后，在响应模式下正确居中折叠li项目：
代码：
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 20px; } .navbar { background-color: black !important; } .navbar .navbar-collapse li{ text-align: center; margin-bottom: 20px; } .navbar-nav > li{ padding-right:30px; } .navbar li a { text-decoration: none; text-transform: uppercase; font-size: 70%; color: #000; } .navbar ul li a { position: relative; z-index: 1; padding: 15px; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Vollkorn&display=swap" rel="stylesheet"> <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-light"> <button class="navbar-toggler"> <span class="navbar-toggler-icon" data-toggle="collapse" data-target="#navbarMenu"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarMenu"> <ul class="navbar-nav"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About me</a></li> <li class="nav-item"><a href="#">Projects</a></li> <li class="nav-item"><a href="#">Contact me</a></li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
题
什么是实现我想要的输出的好方法？
2 个解决方案
解决方案1
2 已采纳 2020-08-29 10:42:30
将这些媒体查询添加到 css 文件的末尾，您将获得所需的结果。 我添加了margin-right: 100px; 由您自行决定。 您自己可以指定所需的像素数。 并且还添加了padding-right: 0; 删除移动设备的缩进以更好地将菜单居中。
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav {
margin-right: 100px;
}
}
@media (max-width: 992px) {
.navbar-nav > li {
padding-right: 0;
}
}
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 20px; } .navbar { background-color: black !important; } .navbar .navbar-collapse li{ text-align: center; margin-bottom: 20px; } .navbar-nav > li{ padding-right:30px; } .navbar li a { text-decoration: none; text-transform: uppercase; font-size: 70%; color: #000; } .navbar ul li a { position: relative; z-index: 1; padding: 15px; } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav { margin-right: 100px; } } @media (max-width: 992px) { .navbar-nav > li { padding-right: 0; } }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Vollkorn&display=swap" rel="stylesheet"> <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-light"> <button class="navbar-toggler"> <span class="navbar-toggler-icon" data-toggle="collapse" data-target="#navbarMenu"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarMenu"> <ul class="navbar-nav"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About me</a></li> <li class="nav-item"><a href="#">Projects</a></li> <li class="nav-item"><a href="#">Contact me</a></li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
解决方案2
1 2020-08-29 10:45:16
你可以做一些事情来实现这一目标：
- 正如您在问题中所建议的，您可以在导航栏的右侧添加边距，但您只能使用媒体查询将其应用于更大的屏幕。 下面的代码添加了一个媒体查询，该查询只会在 992px 或更大的屏幕上应用此 CSS（使用 Bootstrap 的
navbar-expand-lg类在同一点上您的导航栏显示为全宽）：
@media (min-width: 992px) {
#navbarMenu { margin-right: 200px; }
}
请参阅工作示例：
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 20px; } .navbar { background-color: black !important; } .navbar .navbar-collapse li{ text-align: center; margin-bottom: 20px; } .navbar-nav > li{ padding-right:30px; } .navbar li a { text-decoration: none; text-transform: uppercase; font-size: 70%; color: #000; } .navbar ul li a { position: relative; z-index: 1; padding: 15px; } @media (min-width: 992px) { #navbarMenu { margin-right:200px;} }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Vollkorn&display=swap" rel="stylesheet"> <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-light"> <button class="navbar-toggler"> <span class="navbar-toggler-icon" data-toggle="collapse" data-target="#navbarMenu"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarMenu"> <ul class="navbar-nav"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About me</a></li> <li class="nav-item"><a href="#">Projects</a></li> <li class="nav-item"><a href="#">Contact me</a></li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
您也可以简单地在导航栏上设置最大宽度，这样一旦屏幕达到您设置的最大值，就会在两侧添加可变数量的空间，例如
nav { margin:auto; max-width: 400px; }
因为导航栏的背景颜色已添加到nav ，您需要使用包装类用此颜色填充屏幕的其余部分，或者仅使用header ，其中除了导航之外没有任何其他内容。 我们只需要添加 Bootstrap bg-light类来匹配导航栏，例如
<div class="wrap bg-light">
<nav class="navbar navbar-expand-lg navbar-dark bg-light">
[rest of your code here...]
</nav>
</div>
使用包装纸具有额外的优势，即为两侧增加等量的空间，并且随着屏幕变宽而增加空间。 （此外，添加额外的包装器听起来可能有点过分，但它实际上是在所有内容上保持一致宽度的标准方法，因为您可以在所有内容上重用包装器，正如我所说的，您可以使用header )
请参阅工作示例：
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 20px; } .navbar { background-color: black !important; } .navbar .navbar-collapse li{ text-align: center; margin-bottom: 20px; } .navbar-nav > li{ padding-right:30px; } .navbar li a { text-decoration: none; text-transform: uppercase; font-size: 70%; color: #000; } .navbar ul li a { position: relative; z-index: 1; padding: 15px; } nav { margin:auto; max-width: 400px; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Vollkorn&display=swap" rel="stylesheet"> <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> </head> <body> <header> <div class="wrap bg-light"> <nav class="navbar navbar-expand-lg navbar-dark bg-light"> <button class="navbar-toggler"> <span class="navbar-toggler-icon" data-toggle="collapse" data-target="#navbarMenu"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarMenu"> <ul class="navbar-nav"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About me</a></li> <li class="nav-item"><a href="#">Projects</a></li> <li class="nav-item"><a href="#">Contact me</a></li> </ul> </div> </nav> </div> </header> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
如何在Bootstrap 3中将正确的社交媒体图标与navbar-collapse对齐？
[英]How to align right social media icon with navbar-collapse in Bootstrap 3?
如何制作菜单，导航栏，导航药片，导航堆栈折叠Twitter-bootstrap 3.0
[英]How to make menu, navbar nav-pills nav-stacked collapse Twitter-bootstrap 3.0
Twitter bootstrap 3 navbar navbar-right navbar-collapse外
[英]Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.