智能手机上的导航栏下拉列表

时间：2016-10-13 10:46:49

标签： html

智能手机上显示导航栏时出现问题。 菜单的最后一项是下拉列表。除非我放大屏幕，否则不会显示。就好像没有更多的空间来显示子菜单的项目（而其他的dropdwons工作得很完美）。 有人能告诉我我做了什么错吗？这是代码：

    <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <a class="pull-left"><img src="logo_navbar.png" alt="logo"></a><div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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="#"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
     <li class="active">
  <a href="index.html">Home</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Associazione</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="chisiamo.html" title="Chi siamo">Chi siamo</a>
                                </li>
                                <li>
                                    <a href="struttura.html" title="struttura">Struttura</a>
                                <li>
                                    <a href="statuto.html" title="statuto">Statuto</a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bilancio Sociale</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="bilancio2015_16.html" title="bilancio2016">Bilancio 2015-2016</a>
                                </li>
                                <li>
                                    <a href="bilancio2014_15.html" title="bilancio2015">Bilancio 2014-2015</a>
                                </li>
                                <li>
                                    <a href="bilancio2013_14.html" title="bilancio2014">Bilancio 2013-2014</a>
                                </li>
                                <li>
                                    <a href="bilancio2012_13.html" title="bilancio2013">Bilancio 2012-2013</a>
                                </li>
                              </ul>
                        </li>
                        <li>
                            <a href="gara.html" title="gara">Gara di matematica</a>
                        </li>
                        <li>
                            <a href="news.html" title="news">News</a>
                        </li>
                        <li>
                            <a href="rassegnastampa.html" title="stampa">Rassegna stampa</a>
                        </li>
                        <li>
                            <a href="modulo.html" title="iscrizione">Iscrizione</a>
                        </li>
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contatti</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="contatti.html" title="messaggi">Messaggi</a>
                                </li>
                                <li>
                                    <a href="dovesiamo.html" title="dove siamo">Dove siamo</a>
                                </li>
                                <li>
                                    <a href="newsletter.html" title="newsletter">Newsletter</a>
                                </li>
                              </ul>
                        </li>

                  </ul>
                </div>
            </div>
        </nav>
        <!--/.nav-collapse -->

非常感谢您提前 加布里埃尔

3 个答案:

答案 0 :(得分：0)

您的代码有效：

https://jsfiddle.net/8c8x558e/

我认为问题是你的引导链接，记住你必须把这些链接：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我想你忘记了Js链接。

答案 1 :(得分：0)

在移动视图中删除此css .navbar-fixed-top {position：fixed;}

你可以使用{position：static;}

答案 2 :(得分：0)

同样使用class =“caret”，其中是一个子菜单，以确保在文本“Contatti”之后有一个我用它的子菜单。对于任何问题，请在评论中提问我。 LiveONFiddle :) 

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <a class="pull-left"><img src="logo_navbar.png" alt="logo"></a>
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#"></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="index.html">Home</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Associazione</a>
          <ul class="dropdown-menu">
            <li>
              <a href="chisiamo.html" title="Chi siamo">Chi siamo</a>
            </li>
            <li>
              <a href="struttura.html" title="struttura">Struttura</a>
              <li>
                <a href="statuto.html" title="statuto">Statuto</a>
              </li>
          </ul>
          </li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bilancio Sociale</a>
            <ul class="dropdown-menu">
              <li>
                <a href="bilancio2015_16.html" title="bilancio2016">Bilancio 2015-2016</a>
              </li>
              <li>
                <a href="bilancio2014_15.html" title="bilancio2015">Bilancio 2014-2015</a>
              </li>
              <li>
                <a href="bilancio2013_14.html" title="bilancio2014">Bilancio 2013-2014</a>
              </li>
              <li>
                <a href="bilancio2012_13.html" title="bilancio2013">Bilancio 2012-2013</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="gara.html" title="gara">Gara di matematica</a>
          </li>
          <li>
            <a href="news.html" title="news">News</a>
          </li>
          <li>
            <a href="rassegnastampa.html" title="stampa">Rassegna stampa</a>
          </li>
          <li>
            <a href="modulo.html" title="iscrizione">Iscrizione</a>
          </li>
          <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contatti <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="contatti.html" title="messaggi">Messaggi</a>
              </li>
              <li>
                <a href="dovesiamo.html" title="dove siamo">Dove siamo</a>
              </li>
              <li>
                <a href="newsletter.html" title="newsletter">Newsletter</a>
              </li>
            </ul>
          </li>

      </ul>
    </div>
  </div>
</nav>
<!--/.nav-collapse -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

相关问题
最新问题