02. bootstrap导航栏居中

发布时间:2021-09-24 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了02. bootstrap导航栏居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="nav" class="container ys-nav-expand-flex">
    <div class="navbar navbar-expand-sm">
        <a href="#" class="navbar-brand" style="font-size: 42px">HONDA</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ns" aria-controls="ns" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="ns">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item mx-3 text-white fa-circle">Home</li>
                <li class="mx-3 text-white">Models</li>
                <li class="mx-3 text-white">Journalism</li>
                <li class="mx-3 text-white">Activities</li>
                <li class="mx-3 text-white">Download wallpaper</li>
            </ul>
        </div>
    </div>
</div>
#nav {
   background-color: #e12241;
}

.navbar-toggler:not(:disabled):not(.disabled) {
    border: 1px solid rgba(255,255,0.8);
}
/* @media (max-width: 576px) {
<=576的设备 }*/

当屏幕宽度大于576时,改变 .navbar 为 display: inline-flex,再设置text-align:center;使导航栏居中
注意:要把这些设置放在@media (min-width: 576px) 里面,
若是把设置放在@media (min-width: 576px)外面:当屏幕尺寸变小(小于 576)时,网页标题和导航栏按钮将会紧凑的居中在页面,影响美观。

@media (min-width: 576px) { /*
>=576的设备 */ .navbar { display: inline-flex; } #nav { text-align:center; } }

正常电脑端打开网页样式:

02. bootstrap导航栏居中

响应式缩小(屏幕宽度小于576时)

02. bootstrap导航栏居中

总结


以上是前端之家为你收集整理的02. bootstrap导航栏居中全部内容,希望文章能够帮你解决02. bootstrap导航栏居中所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。