                        課程
                    
                        /前端開發(fā)
                        
                            /Bootstrap
                        
                        /玩轉(zhuǎn)Bootstrap（基礎）

下拉菜單問題

復制了兩個下拉菜單的div，然后想讓他們一行顯示，給第一個div設置了左浮動后，第一個下拉菜單直接不能用了，還有一個問題是，點擊第二個下拉菜單，子菜單默認左對齊了，沒有相對下拉菜單

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

?<div class="dropdown" 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>

? </ul>

</div>?

? <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>

? </ul>

</div>?

? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

? <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>?

</body>

</html>

陳小曉

2016-08-16

源自：玩轉(zhuǎn)Bootstrap（基礎） 5-2

關(guān)注問題我要回答

1438

操作

收起

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"?>
</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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>?
</body>
</html>