如何添加移动响应式固定下拉菜单

Question

我正在尝试添加一个移动响应式固定下拉菜单。我试过这个：

<div class="row" style="position:fixed">
<div class="col-sm-10"></div>
<div class="col-sm-2">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Location
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#location1">Location 1</a></li>
<li><a href="#location2">Location 2</a></li>
<li><a href="#location3">Location 3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#location1">ALL</a></li>
</ul>
</div>
</div>
</div>

Answer 1

它工作正常吗？ 可能是您没有正确添加引导程序

jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Bootstrap JavaScript

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

引导 CSS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

---

.text {
height: 3000px;
border: 1px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:fixed">
	<div class="col-sm-10"></div>
	<div class="col-sm-2">
	<div class="dropdown">
				<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				Select Location
				<span class="caret"></span>
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li><a href="#location1">Location 1</a></li>
				<li><a href="#location2">Location 2</a></li>
				<li><a href="#location3">Location 3</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#location1">ALL</a></li>
				</ul>
			</div>
			</div>
			</div>


<br><br>
<div class="text"></div>