twitter-bootstrap – 中心无序列表navbar – 引导3

发布时间：2020-12-18 00:27:10 所属栏目：安全来源：网络整理

导读：所以,我试图把我的导航栏列表项列在中心.由于此任务没有效用函数,因此我设计了将无序列表放入行中的列的以下代码.但是,即使我尝试以旧的“text-align：center”为中心,这个列表仍然是对的, div class="navbar navbar-fixed-top " !--a class="navbar-brand"

所以,我试图把我的导航栏列表项列在中心.由于此任务没有效用函数,因此我设计了将无序列表放入行中的列的以下代码.但是,即使我尝试以旧的“text-align：center”为中心,这个列表仍然是对的,

<div class="navbar navbar-fixed-top ">
    <!--<a class="navbar-brand" href="#">Title</a> -->
    <div class= "row">
        <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

解决方法

我采取的步骤：

>删除float：从列表和列表元素中留下
>使用display：inline代替列表元素
>设置要显示的链接：内嵌块,以便它们保持块的大小
>只需添加文本对齐：中心到导航栏,使所有内容居中
>包装在媒体查询中,因此移动设备上的垂直列表不受影响

结果CSS添加.navbar为中心的样式：

@media (min-width: 768px) {
    .navbar-centered .navbar-nav {
        float: none;
        text-align: center;
    }
    .navbar-centered .navbar-nav > li {
        float: none;
    }
    .navbar-centered .nav > li {
        display: inline;
    }
    .navbar-centered .nav > li > a {
        display: inline-block;
    }
}

使用.navbar为中心的样式到导航栏：

<div class="navbar navbar-default navbar-centered" role="navigation">
    ...
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!