如何將Bootstrap導航欄移動到頁面上

我目前正在使用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>

電流小於有關的導航區域（這主要是從引導variables.less文件股票）/ CSS：

@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可以在這裏操作，像我之前說的那樣推下導航欄。我試圖在頭文件類上面放置一個image div，但我不知道這是否被認爲是最佳做法。請讓我知道你是否需要我的其他東西。我對從這裏走到哪裏有點困惑。謝謝！

來源

2013-12-11 user3092983

看到您現在擁有的CSS將會很有幫助。答案肯定是完全基於CSS的。也許你可以小提琴。 – SunSparc

目前我正在使用Bootstrap中的variables.less文件中包含的所有股票CSS。但如有必要，我可以提供。 – user3092983

開始閱讀http://getbootstrap.com/components/#navbar默認導航欄旁邊的引導程序提供不同類型的導航欄固定到頂部固定到底部和靜態頂部。您通過向您的類添加一個類來設置類型<nav class="navbar navbar-default" role="navigation">

在您的代碼中，您使用navbar-static-top。您可以添加邊距將其將其設置爲較低的位置：

<nav class="navbar navbar-default" role="navigation" style="margin-top:100px;">或.navbar-static-top{margin-top:100px;}

來源

2013-12-12 09:49:43

嘗試使用這個類navbar-fixed-top。這會將菜單欄拉到網頁的頂部。這可能是你應該怎麼做的。 <header class="banner navbar navbar-default navbar-static-top" role="banner">

來源

2016-03-22 12:26:32 user3153983

如何將Bootstrap導航欄移動到頁面上

回答

相關問題