我的导航栏不会水平对齐

Question

我目前正在使用 Bootstrap 3 为我的第一个客户创建网站，但我无法使导航栏正确对齐。当我到达 col-sm 断点时，它停止显示内联。我查阅了许多其他文章并应用了许多不同的 CSS 属性，但无济于事。在这一点上，我认为我的代码中可能存在错误，但我不确定。这是我的第一个真正的项目，所以我在技术上是一个新手（请原谅我糟糕的代码：P）。如果我遗漏了什么，请告诉我。这是屏幕截图和我的代码。

<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand " href="index.html">Spa&bull;ology</a>
        </div> <!-- /.navbar-header -->
        <!--NAV LINKS-->
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav ">
                <!--LINKS-->
                <li><a href="index.html">Home</a></li>
                <!--DROPDOWN LINKS-->
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="waxingandsugaring.html">Waxing &amp; Sugaring</a></li>
                        <li><a href="manisandpedis.html">Manis &amp; Pedis</a></li>
                        <li><a href="spraytanning.html">Spray Tanning</a></li>
                        <li><a href="massages.html">Massages</a></li>
                        <li><a href="lashes.html">Lash Extensions</a></li>
                        <li><a href="facialsandpeels.html">Facials &amp; Peels</a></li>
                    </ul><!-- /.dropdwon-menu -->
                </li>
                <!-- /.dropdown -->
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="http://www.secure-booker.com/spaology/ShopOnline/GiftCertificate.aspx" target="_blank">Gift Certificates</a></li>
                <li><a href="http://www.secure-booker.com/spaology/MakeAppointment/" target="_blank">Book Online</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>

以下是我尝试过的一些 CSS 属性。我使用了这些属性的不同组合，但无济于事。

.navbar .navbar-nav > li {
float:left;    
} 

.navbar .navbar-nav > li {
display:inline;    
}

.navbar .navbar-nav > li {
display:block;
float:left;
vertical-align: top  
}

Answer 1

只需查看您的 css，您就已经定义了 display 和 float 2 次。删除重复的条目并根据需要进行修改

.navbar .navbar-nav > li {
display:inline;
position:relative;
display:block;
float:left;
vertical-align: top;
}

试试这个https://jsfiddle.net/4k1yoctf/2/

Answer 2

没有看到所有相关的 CSS，很难给出具体的建议。但是，Bootstrap 导航栏菜单被编码为在您指定的断点处切换为隐藏，并且菜单项本身垂直堆叠。

你可以在这里自己看看：http://getbootstrap.com/components/#navbar-fixed-top

为了让您的菜单保持可见并且项目（<li> 元素）保持内联，您需要调整或覆盖该断点的 CSS。

Answer 3

感谢大家的意见和建议。你们都应该得到奖牌！我通过减小导航栏元素的大小（宽度）解决了这个问题。通过一些像素操作，我能够将所有导航栏项目排成一行。这是我用来解决问题的 CSS 的示例。希望这对以后的人有帮助。

.navbar .navbar-header > a {
font-size: 1.4em;
width: 40px;
padding-left: 0px;

}

我的导航栏不会水平对齐

My Navbar won't align Horizontally

css

navbar

twitter-bootstrap