2017-07-03 114 views
-1

我正在尝试添加移动响应固定下拉菜单。我尝试这样做:如何添加移动响应固定下拉菜单

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

+1

任何图像或东西,告诉我们结果应该是什么样子? –

回答

0

其工作正常吗?可你我以前不加引导正确

jQuery的

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

引导的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"> 
 
     \t <div class="col-sm-10"></div> 
 
     \t <div class="col-sm-2"> 
 
     \t <div class="dropdown"> 
 
    \t \t \t \t <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    \t \t \t \t Select Location 
 
    \t \t \t \t <span class="caret"></span> 
 
    \t \t \t \t </button> 
 
    \t \t \t \t <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
    \t \t \t \t <li><a href="#location1">Location 1</a></li> 
 
    \t \t \t \t <li><a href="#location2">Location 2</a></li> 
 
    \t \t \t \t <li><a href="#location3">Location 3</a></li> 
 
    \t \t \t \t <li role="separator" class="divider"></li> 
 
    \t \t \t \t <li><a href="#location1">ALL</a></li> 
 
    \t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
     
 
     
 
     <br><br> 
 
    <div class="text"></div>

+0

其工作,但即使在滚动时我也希望它处于相同的位置。 –

+0

@VishnuMR是的位置也一样,它工作正常吗?或者可能是我没有正确理解事情.. – bhv