我的導航欄未顯示在移動設備上

Question

我無法在移動設備上使用我的代碼。 我希望導航欄顯示為可折疊的選項卡，而並不是那樣顯示。 我不確定這是因為自定義樣式還是導航欄中缺少或添加了某些內容。 我添加了徽標，因為我不確定這是否會導致缺少導航欄。 提前致謝。

    </div>
    <div class="logo">
    <p><a href="index.html">Title Here</a></p>
    </div>
    <!-- Navigation -->
    <nav class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                    <li>
                        <a href="bio.html">Bio</a>
                    </li>
                    <li>
                        <a href="lessons.html">Lessons</a>
                    </li>
                    <li>
                        <a href="shows.html">Shows</a>
                    </li>
                    <li>
                        <a href="music.html">Music</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
<pre> and this is the customstyle.css</pre>
    .navbar .navbar-nav {
    position:absolute;
    display: inline-block;
    left:33%;
    margin-top: 7%;
    }

    .navbar li a {
    color:#000000;
    font-size: 15px;
    }
    .navbar li a:focus, .navbar li a:hover{
    -webkit-transition:1s;
    }
    .logo{
    display:inline-block;
    position: absolute;
    left:40%;
    font-size: 20px;

    font: 80px "munich", Sans-serf, Ariel;
    margin: 20px;
    }

    .logo a:focus, .logo a:hover{
     -webkit-transition:1s;
     color:#999999;
     text-decoration: none;
     }
     .logo li a:focus, .logo li a:hover{
     -webkit-transition:1s;
     color:#000000;
     }

Answer 1

該按鈕顯示該按鈕不可見，將navbar-default類添加到您的nav元素中。

為了使下拉菜單在單擊時起作用，您還需要包含bootstrap.js文件，該文件需要jquery我已在示例中包含了它，以便您可以看到它的運行情況。

例

碼：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

而且我注意到您的徽標在導航欄之外，您需要將其放入才能正確顯示

像這樣：

<div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              <a class="navbar-brand" href="#">Project name</a>
</div>