Twitter-Bootstrap下拉框重疊

Question

我是twitter-bootstrap的新手，並嘗試執行與GPA相關的項目。當我減少瀏覽器的窗口大小時，這兩個下拉框在中間的某個點處與每個下拉框重疊。我需要避免重疊。 （我嘗試添加一個偏向第二下拉框，但沒有工作），請人幫助我克服這個.. https://www.dropbox.com/s/d1vi17r2z0itc7e/screenshot%20for%20stackoverflow.jpg?dl=0

<div class="padding"> 
    <div class="row"> 
    <div class="col-xs-1 col-sm-offset-1"> 
     <h5>1.</h5> 
    </div> 
    <!--<div class="col-xs-11 col-sm-4 col-md-6">--> 
    <div class="col-xs-10 col-sm-6"> 
     <input type="text" id="element-1" class="form-control input-md" placeholder="Enter Subject Names"> 
    </div> 
    <!--<div class="col-xs-1 col-sm-1">--> 
    <div class="col-xs-5 col-sm-1"> 
     <div class="padding2"> 
     <div class="dropdown"> 
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button> 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
      <li><a href="#">A+</a></li> 
      <li><a href="#">A</a></li> 
      <li><a href="#">A-</a></li> 
      <li><a href="#">B+</a></li> 
      <li><a href="#">B</a></li> 
      <li><a href="#">B-</a></li> 
      <li><a href="#">C+</a></li> 
      <li><a href="#">C</a></li> 
      <li><a href="#">C-</a></li> 
      <li><a href="#">D+</a></li> 
      <li><a href="#">D</a></li> 
      <li><a href="#">E</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Pass(No Credit)</a></li> 
      <li><a href="#">Not Eligible</a></li> 
      <li><a href="#">Absent</a></li> 
      <li><a href="#">E*</a></li> 
      <li><a href="#">E**</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    <!--<div class="col-xs-1 col-sm-1 col-md-1">--> 
    <div class="col-xs-5 col-sm-1"> 
     <div class="padding2"> 
     <div class="dropdown"> 
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button> 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
      <li><a href="#">5</a></li> 
      <li><a href="#">6</a></li> 
      <li><a href="#">7</a></li> 
      <li><a href="#">8</a></li> 
      <li><a href="#">9</a></li> 
      <li><a href="#">10</a></li> 
      <li><a href="#">No Credit</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

編輯：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<style type="text/css"> 
 
@media (max-width: 480px) { 
 
      .col-xxs { 
 
       display:block; 
 
       float:none; 
 
       width: 100% 
 
      } 
 
      } 
 
</style> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-offset-1 col-xs-offset-1 col-xs-10 col-sm-10"> 
 
      <div class="row"> 
 
       <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 col-xxs text-center"> 
 
        <h5>1.</h5> 
 
       </div> 
 
       <div class="col-lg-7 col-md-7 col-sm-7 col-xs-5 col-xxs"> 
 
        <input type="text" id="element-1" class="form-control input-md" placeholder="Enter Subject Names"> 
 
       </div> 
 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3 col-xxs"> 
 
        <button class="btn btn-default btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button> 
 
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
         <li><a href="#">A+</a></li> 
 
         <li><a href="#">A</a></li> 
 
         <li><a href="#">A-</a></li> 
 
         <li><a href="#">B+</a></li> 
 
         <li><a href="#">B</a></li> 
 
         <li><a href="#">B-</a></li> 
 
         <li><a href="#">C+</a></li> 
 
         <li><a href="#">C</a></li> 
 
         <li><a href="#">C-</a></li> 
 
         <li><a href="#">D+</a></li> 
 
         <li><a href="#">D</a></li> 
 
         <li><a href="#">E</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">Pass(No Credit)</a></li> 
 
         <li><a href="#">Not Eligible</a></li> 
 
         <li><a href="#">Absent</a></li> 
 
         <li><a href="#">E*</a></li> 
 
         <li><a href="#">E**</a></li> 
 
        </ul> 
 
       </div> 
 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3 col-xxs"> 
 
        <div class="dropdown"> 
 
         <button class="btn btn-default btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button> 
 
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
          <li><a href="#">1</a></li> 
 
          <li><a href="#">2</a></li> 
 
          <li><a href="#">3</a></li> 
 
          <li><a href="#">4</a></li> 
 
          <li><a href="#">5</a></li> 
 
          <li><a href="#">6</a></li> 
 
          <li><a href="#">7</a></li> 
 
          <li><a href="#">8</a></li> 
 
          <li><a href="#">9</a></li> 
 
          <li><a href="#">10</a></li> 
 
          <li><a href="#">No Credit</a></li> 
 
         </ul> 
 
         </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>