Question

我的问题是带有bootstrap“navbar”的div类与我的md-12 div重叠，但内容仍然显示但不可点击。我不知道是什么让这件事发生的。

DEMO：https://elevarbetensys.se/SY15/MS15/GYARB/index.php

问题：我如何“删除”或更改以便可以点击。我的徽标和语言选择器现在无法点击。

<div class="container text-center">
    <div class="row">
    <div id="home">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;">
            <h6>This restaurant is educational purpose<br>All orders will be considered as donations.</h6>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;">
            <a href="#home">
                <img class="navbar" src="images/Burning_Rooster.png" alt="Burning_Rooster">
            </a>
            <p>RESTAURANT & LOUNGE BAR</p>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;">
            <ul class="languagepicker roundborders large navbar-right">
                <a href="#en"><li><img src="images/flags/us.png"/>English</li></a>
                <a href="#nl"><li><img src="images/flags/nl.png"/>Nederlands</li></a>
                <a href="#de"><li><img src="images/flags/de.png"/>German</li></a>
                <a href="#fr"><li><img src="images/flags/fr.png"/>Français</li></a>
                <a href="#es"><li><img src="images/flags/es.png"/>Español</li></a>
                <a href="#it"><li><img src="images/flags/it.png"/>Italiano</li></a>
                <a href="#it"><li><img src="images/flags/se.png"/>Svenska</li></a>
            </ul>
        </div>
    </div>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <i class="fa fa-bars" aria-hidden="true" style="font-size:24px;"></i>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#home" onClick="gaq.push(('_trackPageview', 'home'))" class="hvr-underline-from-center">HOME</a>
                    </li>
                    <li>
                        <a href="#menu" onClick="gaq.push(('_trackPageview', 'menu'))" class="hvr-underline-from-center">MENU</a>
                    </li>
                    <li>
                        <a href="#gallery" onClick="gaq.push(('_trackPageview', 'gallery'))" class="hvr-underline-from-center">GALLERY</a>
                    <li>
                        <a href="#reservation" onClick="gaq.push(('_trackPageview', 'reservation'))" class="hvr-underline-from-center">RESERVATION</a>
                    </li>
                    <li>
                        <a href="#review" onClick="gaq.push(('_trackPageview', 'review'))" class="hvr-underline-from-center">REVIEWS</a>
                    </li>
                    <li>
                        <a href="#contact" onClick="gaq.push(('_trackPageview', 'contact'))" class="hvr-underline-from-center">CONTACT</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <img src="images/restaurant/welcome.jpg" alt="Welcome" class="img-responsive img-rounded">
    <h2>Burning Rooster Since 1969</h2>
        <p>14 February 1969, was the year evertying came to place. Our service have been running since.
        <br>
        At our restaurant we serve you the finest food and desserts. Burning Rooster became popular immediatly with our rooster delicacy.
        <br>
        People across the whole world came to taste our finest rooster meny. Our meny have gave pleasure to world famous humans like
        <br>
        Freddy Mercury, Mel Gibson, Kiss and Donald duck creator.
        </p>
        <hr>
    </div>
</div>

CSS：

#home {
    height: auto;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    text-align: center;

}

.languagepicker {
    background-color: #FFF;
    display: inline-block;
    padding: 0;
    height: 40px;
    overflow: hidden;
    transition: all .3s ease;
    margin: 0 0 10px 0;
    vertical-align: top;
    float: left;
}

.languagepicker:hover {
    /* don't forget the 1px border */
    height: 81px;
}

.languagepicker a{
    color: #000;
    text-decoration: none;
    font-size: 16px;
}

.languagepicker li {
    display: block;
    padding: 0px 20px;
    line-height: 40px;
    border-top: 1px solid #EEE;
}

.languagepicker li:hover{
    background-color: #EEE;
}

.languagepicker a:first-child li {
    border: none;
    background: #FFF !important;
}

.languagepicker li img {
    margin-right: 5px;
}

.roundborders {
    border-radius: 5px;
}

.large:hover {
    /* 
    don't forget the 1px border!
    The first language is 40px heigh, 
    the others are 41px
    */
    height: 286px;
}

Answer 1

首先，您在创建#home后立即关闭<div id="home"></div>。{/ 1}}。

其次，我认为您需要做的就是覆盖导航栏的position属性，这是相对的。假设nav是#home的孩子，请尝试以下操作：

#home > nav {
    position: inherit;
}

重叠div，创建不可点击的链接

1 个答案: