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，你已经定义了显示并浮动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;

}

我的导航栏未能水平对齐

3 个答案: