如何在页面上将 Bootstrap 导航栏移到下方答案

【问题标题】：How to move Bootstrap Navbar lower on page如何在页面上将 Bootstrap 导航栏移到下方
【发布时间】：2016-03-22 20:26:32
【问题描述】：

我目前正在为 Wordpress 使用 Roots 主题，并试图弄清楚如何将基于引导程序的导航栏移到页面下方。目前它被推到页面的最顶部，我不知道如何使它低于背景图像。它现在位于背景图像的顶部，而我希望导航栏位于其下方。

这是我的标题 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 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;

我无法弄清楚我可以在我的 app.less 文件或 variable.less 文件中操作哪些 CSS 来将导航栏向下推，就像我之前所说的那样。我试图在标题类上方放置一个图像 div，但我不知道这是否被认为是最佳实践。如果您需要我的其他任何东西，请告诉我。我对从这里去哪里有点困惑。谢谢！

【问题讨论】：

看看你现在拥有的 CSS 会很有帮助。答案肯定是完全基于 CSS 的。也许你可以摆弄这个。
目前我正在使用带有 Bootstrap 的 variables.less 文件中的所有库存 CSS。但如果需要，我可以提供。

标签： html css twitter-bootstrap wordpress-theming less

【解决方案1】：

开始阅读http://getbootstrap.com/components/#navbar 默认导航栏旁边的Bootstrap 提供了不同类型的导航栏Fixed to top、Fixed to bottom 和Static top。您可以通过向 <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;}

【讨论】：

【解决方案2】：

尝试使用此类navbar-fixed-top。这会将菜单栏拉到网页的顶部。这可能是你应该这样做的方式。 <header class="banner navbar navbar-default navbar-static-top" role="banner">

【讨论】：