Question

我的问题是，我建立了一个适用于响应部分的导航栏。

但是，在大屏幕中，我无法点击导航品牌链接。

所以这里是我的代码：

<!--  NavBar -->
<div class="navbar-wrapper">


<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> <!-- class="navbar navbar-default"  -->
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><!-- data-target=".nav-collapse" -->
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="/drupal/" class="navbar-brand active">Accueil</a>

                    </div>


                    <div class="collapse navbar-collapse" id=".navbar-collapse">
                        <ul class="nav navbar-nav">
                           <li class="dropdown">
                                <a href="/drupal/%23" data-toggle="dropdown" class="dropdown-toggle"><img src="http://localhost/drupal/sites/all/images/rubon335.png" width="30" height="30" alt="" />Le club<b class="caret"></b></a>      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">         <li><a href="/drupal/content/le-club">Le club</a></li>
<li><a href="/drupal/content/lhistorique">L&#039;historique</a></li>
<li><a href="/drupal/content/le-projet">Le projet</a></li>
<li><a href="/drupal/" class="active">la structure</a></li>
<li><a href="/drupal/content/les-b%C3%A9n%C3%A9voles">Les bénévoles</a></li>
<li><a href="/drupal/"></a></li>
<li><a href="/drupal/"></a></li>
        </ul></li>

                <li class="dropdown">
                    <a href="/drupal/%23" data-toggle="dropdown" class="dropdown-toggle"><img src="http://localhost/drupal/sites/all/images/rubon504.png" width="30" height="30" alt="" />Les partenaires<b class="caret"></b></a>      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">         <li><a href="/drupal/content/bce-partenaires">Les partenaires</a></li>
        </ul></li>

                <li class="dropdown">
                    <a href="/drupal/%23" data-toggle="dropdown" class="dropdown-toggle"><img src="http://localhost/drupal/sites/all/images/rubon1173.png" width="30" height="30" alt="" />Pratique<b class="caret"></b></a>        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">         <li><a href="/drupal/page/multim%C3%A9dia">Pratique</a></li>
        </ul></li>

         </ul>

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

所以如果有人有想法......那将非常感激

您可以在此链接进行测试：test website

对于通知，我使用drstal 7的bootstrap主题。

Answer 1

您的徽标被navbar-collapse div遮挡。

为徽标提供比菜单更高的z-index，将其添加到CSS：

.navbar-header {
    position: relative;
    z-index: 1000;
}

navbar品牌可在navbar bootstrap中使用

1 个答案: