bootstrap导航栏如何实现居中

这篇文章将为大家详细讲解有关bootstrap导航栏如何实现居中,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

第一种方法:给div和ul添加如下样式:

bootstrap导航栏如何实现居中

<divclass="navbar-collapsecollapse"style="text-align:center;"><ulclass="navnavbar-nav"style="display:inline-block;float:none;"><liclass=""><ahref="#">首页</a></li><liclass=""><ahref="#">加入我们</a></li><liclass=""><ahref="#">联系我们</a></li></ul></div>

第二种方法:

<divclass="navbar-collapsecollapse"><ulclass="navnavbar-nav"><liclass=""><ahref="#">首页</a></li><liclass=""><ahref="#">加入我们</a></li><liclass=""><ahref="#">联系我们</a></li></ul></div>

添加如下样式:

.navbar-nav{float:none;text-align:center;}ul.nav.navbar-navli{float:none;display:inline-block;margin:0em;}

关于bootstrap导航栏如何实现居中就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

发布于 2021-07-24 22:39:15
收藏
分享
海报
0 条评论
206
上一篇:bootstrap中怎么实现一个动态进度条效果 下一篇:jQuery中怎么获取元素位置的接口
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码