如何左对齐引导3下拉菜单? [英] How to left align bootstrap 3 dropdown menu?
问题描述
>
上面的图像MenuItems对齐到MyMenu的右边,我需要左对齐MyMenu的MenuItem(我的意思是它必须对齐到MyMenu的左边缘),我尝试使用拉左和拉右类像< ul class =dropdown-menu pull-leftrole =menu>
<$ c $
这是我的代码
c><! - Static navbar - >
< nav class =navbar navbar-inverserole =navigation>
< div class =container-fluid>
< div class =navbar-header>
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =#navbararia-expanded =falsearia-controls =navbar ;
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brandhref =#>< / a>
< / div>
< div id =navbarclass =navbar-collapse collapse>
< ul class =nav navbar-nav navbar-right text-uppercase>
< li>< a id =首页href =index.html>首页< / a>< / li>
<! - Visa drapdown - >
< li class =dropdown>
< a href =#class =dropdown-toggledata-toggle =dropdown>我的菜单< span class =caret>< / span>< / a>
< ul class =dropdown-menu pull-leftrole =menu>
< li>< a href =#>菜单项01< / a>< / li>
< li>< a href =#>菜单项01< / a>< / li>
< li>< a href =#>菜单项02< / a>< / li>
< li>< a href =#>菜单项03< / a>< / li>
< li>< a href =#>菜单项04< / a>< / li>
< li>< a href =#>< / a>< / li>
< / ul>
< / li>
< / div><! - /。nav-collapse - >
< / div><! - /。container-fluid - >
< / nav>
将此样式元素添加到下拉菜单< ul>
会将下拉列表对齐到菜单项的左侧:
left:0;
查看此 Bootply ,其定位 .dropdown-menu.pull-left
并添加 left:0;
。
这应该可以解决你的问题。
更新
$ b
我看到Bootstrap有弃用 pull-right和pull-left作为Bootstrap 3.1.0。使用 dropdown-menu-left
类来使用内置的Bootstrap css来对齐左边缘的下拉菜单,这样就不需要额外的CSS。查看此更新的 Bootply
In the above image MenuItems are align to right side of the MyMenu, I needed to left align the MenuItems of MyMenu (I mean it must aligned to left edge of MyMenu), I try to use pull-left and pull-right class like <ul class="dropdown-menu pull-left" role="menu">
with my code, but it doesn't work. anyone has an idea how to do this ?
Here is my code
<!-- Static navbar -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li><a id="Home" href="index.html">Home</a></li>
<!-- Visa drapdown-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>
<ul class="dropdown-menu pull-left" role="menu">
<li><a href="#">Menu Item 01</a></li>
<li><a href="#">Menu Item 01</a></li>
<li><a href="#">Menu Item 02</a></li>
<li><a href="#">Menu Item 03</a></li>
<li><a href="#">Menu Item 04</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Adding this style element to the dropdown <ul>
will align the dropdown to the left side of the menu item:
left:0;
See this Bootply which targets the .dropdown-menu.pull-left
and adds a left:0;
.
This should solve your problem.
Update
I see that Bootstrap has deprecated pull-right and pull-left as of Bootstrap 3.1.0. Use dropdown-menu-left
class to use built-in Bootstrap css to align the dropdown on the left edge so you don't need extra CSS. See this updated Bootply
这篇关于如何左对齐引导3下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!