Twitter bootstrap 中心无序列表导航栏-引导3

因此，我试图将导航栏列表项居中。由于此任务没有实用程序函数，因此我设计了以下代码，将无序列表放置在一行中的一列中。但即使我尝试使用旧的“文本对齐：居中”居中，列表仍然向左对齐

<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>

这是我昨天编写的代码，可以与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>             

如果问题仍然存在，请告诉我

---

编辑：删除了不必要的标记

我能够自己解决这个问题。不确定这是否是最佳解决方案：

        <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>   

我采取的步骤：

• 从列表和列表元素中删除

  float:left

• 对列表元素使用

  display:inline

• 将链接设置为

  display:inline block

  ，以保持其块尺寸
• 只需将

  text align:center

  添加到导航栏即可将所有内容居中
• 包装在媒体查询中，使移动设备上的垂直列表不受影响

结果CSS添加了

.navbar居中的
样式：

@介质（最小宽度：768px）{
.导航栏居中。导航栏导航{
浮动：无；
文本对齐：居中；
}
.导航栏居中。导航栏导航>li{
浮动：无；
}
.navbar居中。nav>li{
显示：内联；
}
.navbar居中.nav>li>a{
显示：内联块；
}
}

通过将
.navbar居中
样式应用于navbar来使用：


...
这更干净，但同样的问题仍然存在。列表项在容器内左对齐。我希望他们centeredFirefox似乎在这个解决方案中添加了一个水平滚动条（由于
right:50%
规则）。从小到中时会中断。除此之外，它工作得非常出色。这可能与我在导航栏中使用图像有关。当我找到解决办法时，我会把它挂起来。感谢您验证@deizel
/* 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
}