问居中无序列表navbar - bootstrap 3
EN

Stack Overflow用户

提问于 2013-07-28 04:33:51

回答 3查看 35K关注 0票数 10

因此，我正在尝试将我的导航栏列表项居中。由于没有用于此任务的实用函数，因此我设计了以下代码来将无序列表放在行中的列中。但是，即使在我尝试以旧的“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>

twitter-bootstrap

twitter-bootstrap-3

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-08-30 09:51:23

我采取的步骤：

Remove float: left from list
list elements
使用display: inline代替list elements
Set links to display: inline-block，这样他们就可以保留自己的区块并将text-align: center添加到导航栏中，以便在媒体查询中居中显示，这样移动设备上的垂直列表就不会受到影响

生成的CSS添加了.navbar-centered样式：

@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-centered样式应用于导航栏来使用：

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

票数 23

Stack Overflow用户

发布于 2013-07-28 18:31:32

我自己就能弄明白这件事。不确定这是否是最好的解决方案：

        <div class="navbar navbar-fixed-top">                
                    <div style="border:1px solid black" class="container">
            <div class="inner-nav">
                <!--<a href="#" class="navbar-brand">Title</a> -->
                <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>

然后，我在bootstrap.css中添加了以下样式：

/* ADDED for centering navbar items */
.navbar .inner-nav ul {
position:relative;left:50%;float:left;margin-right:0;margin-left:0;
}

/* ADDED for centering navbar items */
.navbar .inner-nav li {
position:relative;right:50%;float:left;margin:0;list-style:none
}

票数 3

Stack Overflow用户

发布于 2013-07-28 05:41:58

这是我昨天做的代码，在Bootstrap 3 RC1上运行良好。希望这能对你有所帮助。

                <nav class="navbar navbar-fixed-top">                
                        <div class="container">                          
                            <a href="#" class="navbar-brand">Title</a>
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#" >Home</a></li>
                                <li><a href="#" >Services</a></li>
                            </ul>                                                                          
                        </div>                
                </nav>