【怎么修改bootstrap框架导航栏的默认link样式 _bottstrap 】

怎么修改bootstrap框架导航栏的默认link样式

我也踩过这个坑( 2 )

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

回答(2)

bottstrap

详细描述

截图

代码

<nav>
    <div class="container">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">在线定制</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">标准箱</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">品质保障</a>
            </li>
        </ul>
    </div>
</nav>

CSS部分

/*导航栏*/
nav{
    height: 8rem;
    background: #f9f9f9;
}
nav>.container{
    height: 100%;
}
.nav{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.nav-link{
    background-color: #fff;
    padding: 1rem 1.4rem;
    margin: 0 1rem;
    border-radius: 2px;
    color: #000;
}
.nav-item:hover .nav-link{
    background: #007bff;
    color: #fff;
}

编辑于2024-04-18

时间排序

热门排序

[上海|荣耀师兄]JS-杨亚洲
0

目标后hover显示蓝色背景白色字体时，我没看到你的样式里hover状态下，设置了蓝色背景和白色字体。可能是你代码的问题，实测可以自己设置导航栏样式。

查看全部>

编辑于2018-04-11
[萌新|散修弟子]JS-2171
0

hover状态下，设置蓝色背景和白色字体，然后关联就行了，hover前的颜色，hover后的颜色都要设置

查看全部>

编辑于2018-09-21

去第页