2

我为我的 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

4

2 回答 2

1

你已经把你所有的links下单li了，这是错误的。试试下面的代码。

演示小提琴

<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>
于 2013-11-13T09:33:52.187 回答
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>

引导层

于 2013-11-13T09:32:15.627 回答