Question

我在twitter bootstrap中导航有两个问题。

当我重新调整浏览器窗口大小时链接跳出导航

和2.折叠的导航隐藏在旋转木马后面。

我希望导航中的所有链接都具有相同的宽度，因为它们在鼠标悬停时会出现边框，但是因为它们会跳出导航并在重新调整大小时隐藏在旋转木马/滑块后面。当重新调整大小到768px时，它们会崩溃，但是上面的一切都会跳出导航。另一件事是当导航被折叠时，它在打开时隐藏在旋转木马/滑块后面一半。

    <nav class="navbar navbar-inverse" role="navigation">              
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Test</a>
    </div>
    <div class="nav-collapse collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
        <li class="span4"><a href="index.html">Home</a></li>
        <li class="span4"><a href="forschung.html">Forschung</a></li>
        <li class="span4"><a href="fahrzeug.html">Fahrzeug</a></li>
        <li class="span4"><a href="team.html">Team</a></li>
        <li class="span4"><a href="presse.html">Presse</a></li>
        <li class="span4"><a href="ziele.html">Ziele</a></li>
        <li class="span4"><a href="karte.html">Karte</a></li>
        <li class="span4"><a href="jobs.html">Jobs</a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <div id="this-carousel-id" class="carousel slide">
        <ol class="carousel-indicators">
        <li data-target="#this-carousel-id" data-slide-to="0" class="active"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/1200x480" alt="" />
                <a href="fahrzeug.html"><div class="carousel-caption"><h1>Mercedes Benz</h1></div></a>
            </div>
        </div>
        <a class="carousel-control left" href="#this-carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right" href="#this-carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>

这是css

.navbar {
    height: 100px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding-right: 5%;
    background-color: #000000 !important;
    box-sizing: border-box;
}
.navbar-inverse .navbar-nav > li > a { color: #a2a2a2 !important }
.nav  a:link,
a:visited {
    line-height: 4em;
    display: block;
    height: 100px;
    width: 120px;
    text-align: center;
    text-decoration: none;
}
.nav a:after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #062d67;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}
.nav a:hover,
a:focus,
a:active {
    height: 81px;
    color: #ffffff !important;
    background-color: #0d0d0d !important;
}
.nav a:hover:after,
.nav a:focus:after,
.nav a:active:after {
    height: 18px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

任何人都可以指出我做错了吗？

Answer 1

一行中不能包含8个span4个元素。 spanN中N的总和必须为12或更低。你可以在你的案例中使用span1，或者根本不使用<li>（列表项）元素。

调整大小后链接跳出导航（响应）

1 个答案: