慕妹4687642
2017-01-13 16:56
<div class="dropdown" style="float: left;">
<button type="button" class="btn btn-defaule dropdown-toggle" data-toggle="dropdown" >
你喜欢干什么
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li class="dropdown-header">没有A标签</li>
<li>旅游</li>
<li>美食</li>
<li>健身</li>
<li>电影</li>
<li class="divider"></li>
<li role="presentation" class="dropdown-header">加入a标签</li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">旅游</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">美食</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">看书</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">音乐</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">电影</a></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
只是把dropdown-menu右对齐(原本是左对齐),并不涉及与dropdown的对齐,如果你想对齐,还需要将dropdown上添加pull-right类名。
当然你如果只是涉及dropdown-menu文字右对齐,那么添加
.dropdown-menu{
text-align:right!important;
}
我的也是有一部分内容在pull-right时被被挡住一部分,他的style中设置了一个
body {
padding: 50px 100px;
}
所以他的没有被挡住
<div class="dropdown" >
<button type="button" class="btn btn-defaule dropdown-toggle" data-toggle="dropdown">
你喜欢干什么
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-left" role="menu" >
<li class="dropdown-header">没有A标签</li>
<li>旅游</li>
<li>美食</li>
<li>健身</li>
<li>电影</li>
<li class="divider"></li>
<li role="presentation" class="dropdown-header">加入a标签</li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">旅游</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">美食</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">看书</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">音乐</a></li>
<li role="presentation"><a href="#" target="_blank"role="menuitem" tabindex="-1">电影</a></li>
</ul>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
玩转Bootstrap(基础)
314544 学习 · 2275 问题
相似问题