解决bootstrap导航条居中显示的问题

最新推荐文章于 2024-12-04 00:47:06 发布

转载最新推荐文章于 2024-12-04 00:47:06 发布 · 1.5w 阅读

文章标签：

#bootstrap

bootstrap 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了两种实现网页导航栏居中的方法。第一种方法通过设置`navbar-collapse collapse`类并调整`text-align`和`display`属性来实现；第二种方法则为`<li>`元素分别设置了`float:none`和`display:inline-block`样式，并调整了`margin`值以达到同样的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--第一种方法-->
<div class="navbar-collapse collapse" style="text-align: center;">
    <ul class="nav navbar-nav" style="display: inline-block;float: none;">
        <li class="">
            <a href="#">首页</a>
        </li>
        <li class="">
            <a href="#">加入我们</a>
        </li>
        <li class="">
            <a href="#">联系我们</a>
        </li>
    </ul>
</div>
<!--第二种方法-->
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" style="float:none;text-align:center;">
        <li class="" style="float:none;display:inline-block;margin:0em;">
            <a href="#">首页</a>
        </li>
        <li class="" style="float:none;display:inline-block;margin:0em;">
            <a href="#">加入我们</a>
        </li>
        <li class="" style="float:none;display:inline-block;margin:0em;">
            <a href="#">联系我们</a>
        </li>
    </ul>