Bootply

Question

我在我的HTML网站上使用Twitter Bootstrap 3，但导航总是崩溃。当我在普通浏览器中打开它时看起来非常糟糕，在我的手机上它看起来不错。如何在默认情况下使导航栏折叠？

<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
        <div class="container">
          <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>   
<!--              Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.-->
            <a class="navbar-brand" href="#"></a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
<!--          Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->         
               <li class="">
                  <a href="index.html">Hoofdmenu</a>
                  <a href="beschikbaarheid.html">Mijn Beschikbaarheid</a>
                  <a href="zorgvragen.html">Openstaande Zorgvragen</a>
                  <a href="inschrijvingen.html">Mijn inschrijvingen</a>
                  <a href="careassist.html">Mijn Care Assists</a>
               </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
    </div>

以下链接是我的代码;

http://pastebin.com/hApriu50

Answer 1

navbar-nav标记不正确。它应该看起来像..

     <ul class="nav navbar-nav">
           <li class=""><a href="index.html">Hoofdmenu</a></li>
           <li><a href="beschikbaarheid.html">Mijn Beschikbaarheid</a></li>
           <li><a href="zorgvragen.html">Openstaande Zorgvragen</a></li>
           <li><a href="inschrijvingen.html">Mijn inschrijvingen</a></li>
           <li><a href="careassist.html">Mijn Care Assists</a></li>
     </ul>

Bootply

Answer 2

您已将所有links置于单li下，这是错误的。请尝试以下代码。

Demo Fiddle

<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <!-- Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.--> <a class="navbar-brand" href="#">Standby Thuiszorg</a>

    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <!-- Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->
            <li class=""><a href="index.html">Hoofdmenu</a>
            </li>
            <li><a href="beschikbaarheid.html">Mijn Beschikbaarheid</a>
            </li>
            <li><a href="zorgvragen.html">Openstaande Zorgvragen</a>
            </li>
            <li><a href="inschrijvingen.html">Mijn inschrijvingen</a>
            </li>
            <li><a href="careassist.html">Mijn Care Assists</a>
            </li>
        </ul>
    </div>
    <!--/.nav-collapse -->
</div>

Bootstrap导航栏始终处于折叠状态

2 个答案:

Bootply