我的导航栏不会水平对齐

我目前使用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 
}

来源

2016-09-30 umaldo7

我不更加明确在第一时间道歉。每次编辑我都不会多次使用float属性。我在不同的实例中使用了它们，但它没有解决问题。 – umaldo7

我遇到的主要问题是.navbar-brand添加了一个换行符，一旦我点击col-sm断点并且导航栏不再内联。它分成两行，因此不再内联。我希望这有助于澄清我遇到的问题。 – umaldo7

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

您可以看到自己的位置：http://getbootstrap.com/components/#navbar-fixed-top

为了让您的菜单保持可见和项目（在<li>元素）仍在线，你需要调整或以其他方式替换该断点的CSS。

来源

2016-09-30 18:42:47

谢谢您的回应！我添加了我遇到的问题的屏幕截图。也许这将有助于更好地解释我的问题。 – umaldo7

我看到了 - 菜单本身正在慢慢倒下。这通常是没有空间同时包含两个元素（徽标和菜单）的结果。标志和元素是一个静态宽度，因此当屏幕变窄时，它们的空间就会减少。这正是为什么移动菜单倾向于隐藏的原因。有几种方法可以解决这个问题。一，减少元素的大小（宽度），以便它们可以共线并行。二，扩大容器，以便有更多的空间。三，采用手机式隐藏菜单。四，让元素一个在另一个之上存在，也许集中它们。 –

伟大的建议。如果它没有太多要问，你能发布一个我可以使用的CSS的例子吗？如果我要求太多，我表示歉意，我只是对此感到陌生，并且希望以正确的方式处理，而不是盲目。谢谢！ – umaldo7

只是看着你的CSS你已经定义了显示和浮动2次。删除重复的条目，并根据需要

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

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

来源

2016-09-30 18:26:26 Case

感谢您的回复！我添加了我遇到的问题的屏幕截图。也许这将有助于更好地解释我的问题。 – umaldo7

@ umaldo7你说的名字浮到顶？ – Case

这是正确的。看起来好像Navbar品牌在我碰到了col-sm断点时增加了一个换行符，从而使navbar非内联。导航栏保持内联MD和LG断点，并在我点击XS断点时折叠。我只有在遇到SM断点时才会遇到问题。我知道这是由于这两个部分剩下的空间很小。是否有某种CSS技巧/黑客我缺少？ – umaldo7

谢谢大家的意见和建议。你们都应该获得奖牌！我通过减小导航栏元素的大小（宽度）来解决此问题。通过一些像素操作，我能够将所有导航栏项目放入一行。这里是我用来解决问题的CSS的一个例子。希望这有助于未来的人。

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

}

来源

2016-09-30 19:41:47 umaldo7

我的导航栏不会水平对齐

回答

相关问题