下拉菜單隱藏在面板後面

在面板後面

引導菜單隱藏，沒有用z-index效果：下拉菜單隱藏在面板後面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <i class="fa fa-calendar fa-fw"></i> System Years 
 
    <div class="pull-right"> 
 
     <button type="button" class="btn btn-info btn-xs btn-add-year " data-toggle="tooltip" title="Add year"><i class="fa fa-plus"></i></button> 
 
    </div> 
 
    </div> 
 
    <!-- /.panel-heading --> 
 
    <div class="panel-body"> 
 
    <div class="table-responsive"> 
 
     <table class="table table-bordered table-hover table-striped"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <strong>2014</strong> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
               Menu 1 <span class="caret"></span> 
 
              </button> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="javascript:;">All</a></li> 
 
        <li><a href="javascript:;">Other</a></li> 
 
       </ul> 
 
       </div> 
 

 
      </td> 
 

 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <strong>2015</strong> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
               Menu 2 <span class="caret"></span> 
 
              </button> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="javascript:;">All</a></li> 
 
        <li><a href="javascript:;">Other</a></li> 
 
       </ul> 
 
       </div> 
 

 
      </td> 
 

 
      </tr> 
 

 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <!-- /.table-responsive --> 
 
    </div> 
 
    <!-- /.panel-body --> 
 
</div>

來源

2017-07-28 Govind Samrow

問題與父母DIV的溢出。請參見下面的代碼爲DIV，看到的圖像以供參考：

@media screen and (max-width: 767px) 
tables.less:180 
.table-responsive { 
    width: 100%; 
    margin-bottom: 15px; 
    overflow-y: visible; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #ddd; 
    height: 120px; 
}

來源

2017-07-28 10:10:56 Star

請使用類表而不是的表格響應。表響應類有一個屬性溢出：隱藏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <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"></script> 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <i class="fa fa-calendar fa-fw"></i> System Years 
 
    <div class="pull-right"> 
 
     <button type="button" class="btn btn-info btn-xs btn-add-year " data-toggle="tooltip" title="Add year"><i class="fa fa-plus"></i></button> 
 
    </div> 
 
    </div> 
 
    <!-- /.panel-heading --> 
 
    <div class="panel-body"> 
 
    <div class="table"> 
 
     <table class="table table-bordered table-hover table-striped"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <strong>2014</strong> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
               Menu 1 <span class="caret"></span> 
 
              </button> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="javascript:;">All</a></li> 
 
        <li><a href="javascript:;">Other</a></li> 
 
       </ul> 
 
       </div> 
 

 
      </td> 
 

 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <strong>2015</strong> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
               Menu 2 <span class="caret"></span> 
 
              </button> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="javascript:;">All</a></li> 
 
        <li><a href="javascript:;">Other</a></li> 
 
       </ul> 
 
       </div> 
 

 
      </td> 
 

 
      </tr> 
 

 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <!-- /.table-responsive --> 
 
    </div> 
 
    <!-- /.panel-body --> 
 
</div>

來源

2017-07-28 10:08:14

對不起，可以」 t做到這一點，我們需要表格響應 –

好的，添加.table-responsive {overflow-y：visible;} –

可以使用overflow: inherit !important;。表響應DIV中

.table-responsive{overflow: inherit !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <i class="fa fa-calendar fa-fw"></i> System Years 
 
    <div class="pull-right"> 
 
     <button type="button" class="btn btn-info btn-xs btn-add-year " data-toggle="tooltip" title="Add year"><i class="fa fa-plus"></i></button> 
 
    </div> 
 
    </div> 
 
    <!-- /.panel-heading --> 
 
    <div class="panel-body"> 
 
    <div class="table-responsive"> 
 
     <table class="table table-bordered table-hover table-striped"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <strong>2014</strong> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
               Menu 1 <span class="caret"></span> 
 
              </button> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="javascript:;">All</a></li> 
 
        <li><a href="javascript:;">Other</a></li> 
 
       </ul> 
 
       </div> 
 

 
      </td> 
 

 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <strong>2015</strong> 
 

 
       <div class="btn-group"> 
 
       <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
               Menu 2 <span class="caret"></span> 
 
              </button> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="javascript:;">All</a></li> 
 
        <li><a href="javascript:;">Other</a></li> 
 
       </ul> 
 
       </div> 
 

 
      </td> 
 

 
      </tr> 
 

 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <!-- /.table-responsive --> 
 
    </div> 
 
    <!-- /.panel-body --> 
 
</div>

來源

2017-07-28 10:14:23

下拉菜單隱藏在面板後面

回答

相關問題