モバイルレスポンス固定ドロップダウンメニューを追加するには

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> 

ブートストラップの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>

ブートストラップ追加did'tすることができます0