在上面的图像中,MenuItems与MyMenu的右侧对齐,我需要左对齐MyMenu的MenuItems(我的意思是它必须与MyMenu的左边缘对齐),我尝试使用左拉和拉右像我的代码一样的<ul class="dropdown-menu pull-left" role="menu">
类,但它不起作用。谁知道怎么做?
这是我的代码
<!-- 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>
答案 0 :(得分:41)
<div class="dropdown-menu pull-right">
<!-- write your code here -->
</div>
希望它有所帮助:)
答案 1 :(得分:19)
对于Bootstrap 3.1.0或更高版本,使用.dropdown-menu-left
或.dropdown-menu-right
显示父菜单右侧或左侧的下拉菜单。在您的情况下尝试以下。
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left" role="menu">
<!-- write your code here -->
</ul>
</li>
Bootstrap是最佳
答案 2 :(得分:18)
将此样式元素添加到下拉列表<ul>
会将下拉菜单对齐到菜单项的左侧:
left:0;
请参见.dropdown-menu.pull-left
left:0;
,其中dropdown-menu-left
为{{1}},并添加{{1}}。
这应该可以解决你的问题。
<强>更新强>
从Bootstrap 3.1.0开始,我看到Bootstrap有Bootply向右拉和向左拉。使用{{1}}类来使用内置的Bootstrap css来对齐左边缘的下拉列表,这样您就不需要额外的CSS了。请参阅此更新deprecated
答案 3 :(得分:6)
将navbar-right更改为navbar-left并向UL添加一个右拉类。
<ul class="nav navbar-nav navbar-left text-uppercase pull-right">
查看JSfiddle的示例。
答案 4 :(得分:5)
由于以上给出的答案太旧,希望为Bootstrap 3.3.7提供可行的解决方案。
在.dropdown-menu div上使用给定的CSS:
.dropdown-left-manual {
right: 0;
left: auto;
padding-left: 1px;
padding-right: 1px;
}
说明:
答案 5 :(得分:1)
对于浮动在屏幕右侧的下拉菜单项,其下拉菜单内容在屏幕上流动,只需添加以下代码即可防止下拉菜单内容在屏幕上流动。
right: 0;
答案 6 :(得分:0)
对于 Bootstrap 4 :
有名为.dropup
,.dropright
和.dropleft
的CSS类。
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
来源:Bootstrap