【Bootstrap响应式导航栏的下拉栏会覆盖住页面的内容 _bottstrap 】

Bootstrap响应式导航栏的下拉栏会覆盖住页面的内容

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(2)

bottstrap

详细描述

截图

代码

.navbar-default{
    background-color:#29b078;
    margin:0;
    border:none;
    border-radius:0;
    height:5rem;
}
/*给导航栏右侧文字设置样式*/
.navbar-default .navbar-nav > li > a {
    color:#fff;
    background-color:#29b078;
    border-bottom:0.2rem solid transparent;
}
.navbar-default .navbar-nav > li > a:hover {
    border-bottom:0.2rem solid #fff;
}
.navbar-default .navbar-collapse{
    border:none;
    text-align:center;
}

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">首页</a></li>
                <li><a href="task8-3.html">职业</a></li>
                <li><a href="task8-3.html">推荐</a></li>
                <li><a href="task8-2.html">关于</a></li>
            </ul>
        </div>
    </div>
</nav>

编辑于2024-04-26

时间排序

热门排序

[深圳|结业弟子]JS-李韬
0

把
.navbar-default{
background-color:#29b078;
margin:0;
border:none;
border-radius:0;
height:5rem;
}
中的height:5rem;去掉就好了。

查看全部>

编辑于2018-06-01
[郑州|结业弟子]JS-陈占乐
0

之前我也遇到过，给折叠导航栏设置定高之后，打开导航栏好像脱离文档流，不管怎么设置都不行；去除定高之后，就会重新占据文档流

查看全部>

编辑于2018-08-31

去第页