无法正确居中导航栏（使用col-md-3）引导CSS和HTML

Question

所以基本上我有以下代码：HTML和CSS，也使用了引导程序，由于某种原因，它没有居中。 它曾经是，但在某些时候不再存在，现在它向左拉。 参见下图。 有任何想法吗？

<div class="row" id="nav-bar">
    <div class="col-md-9">
        <ul>
            <li class="col-md-3 nav-btn" id="home"><a href="index.html">Home</a></li>
            <li class="col-md-3 nav-btn" id="about"><a href="about.html">About</a></li>
            <li class="col-md-3 nav-btn dropdown-toggle" id="games">
                <a href="#">Games & Apps &#9660;</a>
                <div class="dropdown">
                    <ul>
                        <li><a href="#" id="games2">Games & Apps &#9660;</a></li>
                        <li id="first"><a href="#">Space Rodeo</a></li>
                        <li id="spaced"><a href="#">Boodya's Carpet Ride</a></li>
                        <li id="spaced"><a href="#">Ultimate Points Counter</a></li>
                    </ul>
                </div>
            </li>
            <li class="col-md-3 nav-btn" id="blog"><a href="blog.html">Blog</a></li>
        </ul>
    </div>                              
</div>

#nav-bar {
margin: 0px 0px 10px 0px;  
height: 60px;
}

#nav-bar ul {
    margin-top: 20px;   
}

.col-md-3 a {
    padding: 15px 40px 15px 40px;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    color: #B6B6B6;
}

#nav-bar a:hover {
    color: #428bca;
}

.col-md-3 {
    display: inline;   
}

.col-md-9 {
    float: none;
    margin: auto;
    left: 0;
    right: 0;
}

.dropdown {
    padding: 0;
    margin-top: -48px;
    position: absolute;
    z-index: 10;
    background-color: #ffffff;
    box-shadow: -5px -5px 20px;
    border-radius: 5px;
    height: 210px;
    width: 275px;
}

.dropdown ul {
    padding: 0;
    margin-top: 0;
}

.dropdown li {
    list-style: none;
    padding: 0;
    width: 310px;
}

#games2 {
    color: #428bca;
}

#spaced {
    margin-top: 10px;   
}

#first {
    padding-top: 20px;
    border-top: 1px solid black;
    margin-top: 22px;
} 

显示代码结果，导航栏偏离中心

http://i.stack.imgur.com/smtTP.png

Answer 1

您的列表项将display: inline ，这意味着它们将遵循文本的对齐规则。 由于您未设置text-align ，因此默认为左侧。 您可以通过在ul添加text-align: center来解决此问题，从而使内容居中。

现在，下拉列表的内部也将继承该列表，您可以通过设置text-align: left再次回到下拉列表ul来重置它。

还要重置ul默认具有的左填充。

#nav-bar ul {
    padding-left: 0;
    text-align: center;
}

#nav-bar .dropdown  ul {
     text-align: left;   
}

在此jsFiddle中工作