我设置dropdown-menu-right后整个ul跑到浏览器最右边了
来源：5-5 下拉菜单（对齐方式）
刘洪光
2016-08-26 18:13
我设置dropdown-menu-right后整个ul跑到浏览器最右边了，说好的与父容器对齐呢，然后我看了.dropdown-menu添加了浮动属性，它的位置已经不再父元素之内了啊
写回答
关注
2回答
-
- Colorfulday
- 2016-09-04 12:03:16
给div.dropdown添加右浮动样式
style="float:right;"
-
- 没有冰激凌的夏天不完整
- 2016-08-27 10:36:17
为了方便看父容器位置，你可以给div添加边框，希望能帮到你 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>对齐方式</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h4>使用pull-right类使下拉菜单与父容器右边对齐</h4> <div class="dropdown" style="border:1px solid #ccc"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div> <br /> <br /> <h4>使用dropdown-menu-right类使下拉菜单与父容器右边对齐</h4> <div class="dropdown" style="border:1px solid #ccc"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div> <br /> <br /> <h4>下拉菜单与父容器左边对齐</h4> <div class="dropdown" style="border:1px solid #ccc"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div class="dropdown" style="border:1px solid #ccc"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown"> 食物 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right "> <li role="presenttation">水果</li> <li role="presentation">苹果</li> </ul> </div> </body> </html>
玩转Bootstrap（基础）
告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap
314546 学习 · 2275 问题
相似问题