                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

下拉菜单问题

复制了两个下拉菜单的div，然后想让他们一行显示，给第一个div设置了左浮动后，第一个下拉菜单直接不能用了，还有一个问题是，点击第二个下拉菜单，子菜单默认左对齐了，没有相对下拉菜单

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

下拉菜单

</button>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

</ul>

</div>

下拉菜单

</button>

</ul>

</div>

</body>

</html>

陈小晓

2016-08-16

源自：玩转Bootstrap（基础） 5-2

关注问题我要回答

1401

操作

收起

2 回答

陈小晓提问者
2016-08-16

这个我知道，但是如果外层是div.dropdown就不能做出正常效果吗？

0 回复有任何疑惑可以回复我~

收起回答

东风吹雪
2016-08-16

<!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">
</head>
<body>

 <div class="btn-group" style="float:left">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" 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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    <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"><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> 
</body>
</html>