Bootstrap 3-自定義折疊時導航欄相對於品牌/徽標的位置

Question

因此，我已經開始建立我的第一個網站，並且正在嘗試Bootstrap 3框架。

我選擇的導航欄已設置為響應屏幕尺寸，因此最終它會折疊成一個小按鈕，可在平板電腦和移動設備上使用。

我真的不太喜歡折疊的導航欄項目的默認位置； 當我希望它們從徽標下方開始時，它們會立即顯示在徽標旁邊。 即在此屏幕截圖的藍色虛線區域中：

屏幕寬度越窄，問題就越多：

導航欄以767px的寬度折疊； 我在引導CSS上戳了一下，發現有很多@media查詢，但不確定是哪一個對我有幫助，也不知道如何在導航欄項落到徽標下方時崩潰了。

到目前為止，這是我的html導航欄（很顯然，從引導文件中提取了css / js）。

<header>

    <!-- navigation -->
    <div class="navbar navbar-default navbar-static-top">
        <div class="container">

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>

            <div class="collapse navbar-collapse navbar-responsive-collapse">

                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">HOME</a></li>
                    <li><a href="#">PAGE 1</a></li>
                    <li><a href="#">PAGE 2</a></li>
                    <li><a href="#">PAGE 3</a></li>
                    <li><a href="#">PAGE 4</a></li>
                    <li><a href="#">PAGE 5</a></li>
                </ul>

            </div>
        </div>
    </div>

</header>

Answer 1

我在jfiddle上使用您的代碼時遇到了同樣的問題。 您的某些代碼已關閉。 默認情況下，Bootstrap應該可以執行您想要的操作-折疊后的字體應位於徽標下方。

您剛剛離開了按鈕和品牌周圍的導航欄標題div。

<header>

<!-- navigation -->
<div class="navbar navbar-default navbar-static-top">
    <div class="container">

     <div class="navbar-header"><!-- navbar-header should go here -->

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>

        </div><!--header should end here -->

       <div class="collapse navbar-collapse navbar-responsive-collapse">

            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">PAGE 1</a></li>
                <li><a href="#">PAGE 2</a></li>
                <li><a href="#">PAGE 3</a></li>
                <li><a href="#">PAGE 4</a></li>
                <li><a href="#">PAGE 5</a></li>
            </ul>

        </div>
    </div>
</div>