Callover顯示過高引導選擇下拉列表

Question

當我將鼠標移到下拉列表中的單詞上時，我似乎無法抑制下拉菜單下方滑動條的數據調出，並且這是滑動條存在的位置。

請參閱圖像和jsfiddle，因爲這是混淆解釋。

我正在使用引導選擇和引導滑塊。

https://jsfiddle.net/wolfpack06/u2z7tp0m/ 單擊「屏幕標準」按鈕查看有問題的模態。

在此先感謝1

   <div class="container"> 
        <form> 

         <!-- Symbols --> 
         <div class="form-group row"> 
          <label for="symbols" class="col-sm-2 col-form-label">Symbols</label> 
          <div class="col-sm-10"> 
           <select class="selectpicker" multiple data-live-search="true" multiple data-actions-box="true" id="symbols"> 
            <optgroup label="Index/ETF"> 
              <option>SPX</option> 
              <option>IBB</option>  
            </optgroup> 
            <optgroup label="Stock"> 
              <option>NFLX</option> 
              <option>TSLA</option> 
            </optgroup> 
           </select> 
          <br> 
          &nbsp;Not finding a symbol? <a href="#">Request it</a> 

          </div> 

         </div> 

         <!-- Spread Types --> 
         <div class="form-group row"> 
          <label class="col-sm-2">Spread Types</label> 
          <div class="col-sm-10"> 
           <div class="form-check"> 
             <input id="typebullput" class="form-check-input" type="checkbox"> Bull Put Spreads 
           </div> 
           <div class="form-check"> 
             <input id="typebullput" class="form-check-input" type="checkbox"> Bear Call Spreads         
           </div> 
          </div> 
         </div> 

         <!-- Expiration Distance --> 
         <div class="form-group row"> 
          <label for="expirationdistance" class="col-sm-2 col-form-label">Expiration Distance</label> 
          <div class="col-sm-10"> 
          <!-- double slider --> 
           <span id="expirationdistancelow" class="hidden">Low Distance</span> 
           <span id="expirationdistancehigh" class="hidden">High Distance</span> 
           <input id="expirationdistance" type="text"/> 
           &nbsp; 
           <span id="expirationdistancelabel"><span id="expirationdistanceval">0,35</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="includeweeklyexpiration" class="form-check-input" type="checkbox" disabled> Include weekly expirations 
          </div> 
         </div> 

         <!-- Maximum Delta --> 
         <div class="form-group row"> 
          <label class="col-sm-2">Maximum Delta</label> 
          <div class="col-sm-10"> 
           <input id="maximumdelta" type="text" data-slider-min="0" data-slider-max="0.25" data-slider-step="0.01" data-slider-value="0.08" disable/> 
           &nbsp; 
           <span id="maximumdeltalabel"><span id="maximumdeltaval">0.08</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="maximumdelta-enabled" type="checkbox"/ checked> Enabled 
          </div> 
         </div>       

         <!-- Spread Width --> 
         <div class="form-group row"> 
          <label for="spreadwidth" class="col-sm-2 col-form-label">Spread Width</label> 
          <div class="col-sm-10"> 
          <!-- double slider --> 
           <span id="spreadwidthlow" class="hidden">Low Width</span> 
           <span id="spreadwidthhigh" class="hidden">High Width</span> 
           <input id="spreadwidth" type="text"/> 
           &nbsp; 
           <span id="spreadwidthlabel"><span id="spreadwidthval">5,15</span></span> 
          </div> 
         </div> 

         <!-- Minimum Distance --> 
         <div class="form-group row"> 
          <label class="col-sm-2">Minimum Distance (%)</label> 
          <div class="col-sm-10"> 
           <input id="minimumdistance" type="text" data-slider-min="5" data-slider-max="25" data-slider-step="1" data-slider-value="12" disable/> 
           &nbsp; 
           <span id="minimumdistancelabel"><span id="minimumdistanceval">12</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="minimumdistance-enabled" type="checkbox"/ checked> Enabled 
          </div> 
         </div> 

         <!-- Minimum Premium --> 
         <div class="form-group row"> 
          <label class="col-sm-2">Minimum Premium</label> 
          <div class="col-sm-10"> 
           <input id="minimumpremium" type="text" data-slider-min="0.05" data-slider-max="1.0" data-slider-step="0.01" data-slider-value="0.25" disable/> 
           &nbsp; 
           <span id="minimumpremiumlabel"><span id="minimumpremiumval">0.25</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="minimumpremium-enabled" type="checkbox"/ checked> Enabled 
          </div> 
         </div> 

         <!-- Minimum Profit disabled --> 
         <div class="form-group row"> 
          <label class="col-sm-2">Minimum Target ROM (%)</label> 
          <div class="col-sm-10"> 
           <input id="minimumprofit" type="text" data-slider-min="1.0" data-slider-max="10.0" data-slider-step="0.25" data-slider-value="2.5" disable/> 
           &nbsp; 
           <span id="minimumprofitlabel"><span id="minimumprofitval">2.5</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="minimumprofit-enabled" type="checkbox"/> Enabled 
          </div> 
         </div> 

         <!-- Minimum Leg Vol disabled --> 
         <div class="form-group row"> 
          <label class="col-sm-2">Minimum Short/Long Leg Volume</label> 
          <div class="col-sm-10"> 
           <input id="minimumlegvol" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="10" disable/> 
           &nbsp; 
           <span id="minimumlegvollabel"><span id="minimumlegvolval">10</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="minimumlegvol-enabled" type="checkbox"/> Enabled 
          </div> 
         </div> 

         <!-- Minimum Short Leg Vol disabled --> 
<!--       <div class="form-group row"> 
          <label class="col-sm-2">Minimum Short Leg Vol</label> 
          <div class="col-sm-10"> 
           <input id="minimumshortlegvol" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="10" disable/> 
           &nbsp; 
           <span id="minimumshortlegvollabel"><span id="minimumshortlegvolval">10</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="minimumshortlegvol-enabled" type="checkbox"/> Enabled 
          </div> 
         </div> --> 

         <!-- Minimum Long Leg Vol disabled --> 
<!--       <div class="form-group row"> 
          <label class="col-sm-2">Minimum Long Leg Vol</label> 
          <div class="col-sm-10"> 
           <input id="minimumlonglegvol" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="10" disable/> 
           &nbsp; 
           <span id="minimumlonglegvollabel"><span id="minimumlonglegvolval">10</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="minimumlonglegvol-enabled" type="checkbox"/> Enabled 
          </div> 
         </div> --> 

         <!-- Minimum Open Interest --> 
         <div class="form-group row"> 
          <label class="col-sm-2">Minimum Open Interest</label> 
          <div class="col-sm-10"> 
           <input id="minimumopeninterest" type="text" data-slider-min="0" data-slider-max="1000" data-slider-step="10" data-slider-value="100" disable/> 
           &nbsp; 
           <span id="minimumopeninterestlabel"><span id="minimumopeninterestval">100</span></span> 
          </div> 
          <div class="col-sm-10"> 
           <input id="minimumopeninterest-enabled" type="checkbox"/ checked> Enabled 
          </div> 
         </div> 




         <div class="form-group row"> 
          <div class="offset-sm-2 col-sm-10"> 
           <button type="submit" class="btn btn-primary">Submit</button> 
          </div> 
         </div> 
        </form> 
       </div> 

Answer 1

工具提示有1070 z-index所以你需要下拉高於任何東西，例如：

.dropdown-menu{ z-index: 1080; }