我目前正在使用 WordPress 的 Roots 主题,并试图弄清楚如何将基于 Bootstrap 的导航栏移动到页面的下方。目前它被推到页面的最顶部,我不知道如何让它低于背景图像。它现在位于背景图像的顶部,而我希望导航栏位于其下方。
这是我的标题 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>
与导航区域相关的当前 Less/CSS(这主要来自 Bootstrap 变量.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;
我无法弄清楚我可以在 app.less 文件或variable.less 文件中操作哪些 CSS 来将导航栏向下推,就像我之前所说的那样。我尝试将图像 div 放在 header 类上方,但我不知道这是否被认为是最佳实践。如果您还需要我提供任何其他信息,请告诉我。我对从这里去哪里有点困惑。谢谢!
最佳答案
开始阅读 http://getbootstrap.com/components/#navbar默认导航栏旁边的 Bootstrap 提供了不同类型的导航栏“固定到顶部”、“固定到底部”和“静态顶部”。您可以通过将类添加到 <nav class="navbar navbar-default" role="navigation">
来设置类型。
在您的代码中使用 navbar-static-top
。您可以为其添加 margin-top 以将其设置为较低的位置:
<nav class="navbar navbar-default" role="navigation" style="margin-top:100px;">
或.navbar-static-top{margin-top:100px;}
关于html - 如何将 Bootstrap 导航栏移至页面下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20530592/