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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

bootstrap css

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;