twitter-bootstrap 如何将 Bootstrap 导航栏移到页面下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20530592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move Bootstrap Navbar lower on page
提问by user3092983
I am using the Roots theme for Wordpress currently and am trying to figure out how I can move the bootstrap based navbar lower on my page. Currently it is pushed to the very top of the page and I cannot figure out how to make it go below a background image. It is right now sitting on top of a background image, when I would like the navbar to be below it.
我目前正在为 Wordpress 使用 Roots 主题，并试图弄清楚如何将基于引导程序的导航栏移到我的页面下方。目前它被推到页面的最顶部，我不知道如何让它低于背景图像。它现在位于背景图像的顶部，当我希望导航栏位于其下方时。
Here is my header html:
这是我的标题 html：
<header class="banner navbar navbar-default navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar- collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo home_url(); ?>/">
<?php bloginfo('name'); ?>
</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' =>
'nav navbar-nav')); endif; ?>
</nav>
</div>
</header>
Current Less/CSS pertaining to the Nav area (this is mostly stock from the Bootstrap variables.less file):
当前与导航区域相关的 Less/CSS（这主要来自 Bootstrap variables.less 文件）：
@media (min-width: @screen-lg) { .navbar{ width: 940px;} }
@navbar-height: 55px;
@navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777;
@navbar-default-bg: @brand-medalist;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@nav-link-padding: 10px 15px;
I'm having trouble figuring out what CSS I can manipulate here in my app.less file or variable.less file to push the navbar down like I said before. I tried to put an image div above the header class, but I don't know if that's considered best practice or not. Please let me know if you need anything else from me. I am a bit confused on where to go from here. Thanks!
我无法弄清楚我可以在 app.less 文件或 variable.less 文件中操作哪些 CSS 以将导航栏向下推，就像我之前说的那样。我试图在标题类上方放置一个图像 div，但我不知道这是否被认为是最佳实践。如果您需要我的其他任何东西，请告诉我。我对从这里去哪里有点困惑。谢谢！
回答by Bass Jobsen
Start reading http://getbootstrap.com/components/#navbarBootstrap beside the default navbar provide different types of navbars Fixed to top, Fixed to bottom and Static top. You set the type by adding a class to your <nav class="navbar navbar-default" role="navigation">
开始阅读http://getbootstrap.com/components/#navbarBootstrap 除了默认导航栏提供不同类型的导航栏固定到顶部、固定到底部和静态顶部。您可以通过向您的类中添加一个类来设置类型<nav class="navbar navbar-default" role="navigation">
In your code you use navbar-static-top. You can add a margin-top to it to set it to a lower position:
在您的代码中，您使用navbar-static-top. 您可以为其添加 margin-top 以将其设置为较低的位置：
<nav class="navbar navbar-default" role="navigation" style="margin-top:100px;">or .navbar-static-top{margin-top:100px;}
<nav class="navbar navbar-default" role="navigation" style="margin-top:100px;">或者 .navbar-static-top{margin-top:100px;}
回答by sandeep srivastav vaddiparthy
Try using this class navbar-fixed-top. This will pull the menu bar to the top of the web page. This is may be how you should probably be doing it. <header class="banner navbar navbar-default navbar-static-top" role="banner">
尝试使用这个类navbar-fixed-top。这会将菜单栏拉到网页的顶部。这可能是您应该这样做的方式。<header class="banner navbar navbar-default navbar-static-top" role="banner">
