Css 如何使下拉菜单与标题向左对齐?
如何使子菜单与标题左侧对齐 我尝试了Css 如何使下拉菜单与标题向左对齐?,css,twitter-bootstrap-3,frontend,Css,Twitter Bootstrap 3,Frontend,如何使子菜单与标题左侧对齐 我尝试了。下拉菜单左。在中,但不起作用 代码如下: <div class="mainMenu"> <nav class="navbar navbar-sura" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="na
。下拉菜单左。
在
中,但不起作用
代码如下:
<div class="mainMenu">
<nav class="navbar navbar-sura" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="" class="Logo-Small"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="container">
<a href=""class="Logo"></a>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Seguros para Autos</a>
<ul class="dropdown-menu">
<li class="pruebamenu"><a href="#">Seguros para Autos</a></li>
<li class="pruebamenu"><a href="#">Centros de servicio</a></li>
<li class="pruebamenu"><a href="#">Asistencia</a></li>
<li class="pruebamenu"><a href="#">Te damos más</a></li>
<li class="pruebamenu"><a href="#">Acompañamiento satelital</a></li>
<li class="pruebamenu"><a href="#">Formación</a></li>
<li class="pruebamenu"><a href="#">Aliados</a></li>
<li class="pruebamenu"><a href="#">Promociones</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
切换导航
-
很难从您的屏幕截图中分辨出来,但下拉菜单可能会这样做,因为下拉菜单靠近浏览器视口的右边缘-Bootstrap 3现在“智能地”将工具提示和弹出框定位在视口内,如果它检测到工具提示将在浏览器视口外渲染。我怀疑下拉列表也是如此。这使得右侧对齐:
<ul class="nav navbar-nav navbar-right">
我改为:
<ul class="nav navbar-nav navbar-left">
:)谢谢你,乔伊斯。这也发生在菜单的第一个选项上,并且它不在浏览器视口的边缘附近。我用代码编辑了这个问题。啊-好吧,引导文档总是一个很好的开始-我会确保你为菜单准备的代码与这里的示例相匹配:-从你的屏幕截图上看,下拉菜单也与导航栏底部对齐,似乎存在一些定位问题。