Question

我在面板主体中有一个下拉菜单，另一个面板主体下面有内容。单击下拉菜单时，它将隐藏在第二个面板主体下方。我尝试了各种z-index和溢出：可见/自动等但没有快乐。

html：

<div class="row">
    <div class="col-lg-12">
        <div class="hpanel">            
            <div class="panel-body">
                <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><h3 class="box-title"><i class="fa fa-fw fa-info-circle"></i> Heading</h3></a>
                </div>
<p class="text-muted">Basic Info</p><br/> 
            <div id="collapseOne" class="panel-collapse collapse">
            <p>Full Info</p>
            </div>
            </div>
            <div class="panel-footer">
        <a href="index.php?n1=personnel&n2=personnel_details&amp;n3=add_personnel"><button class="btn btn-success"><i class="fa fa-fw  fa-plus-circle"></i> button 1</button></a>&nbsp;
        <a href="index.php?n1=personnel&n2=personnel_details&amp;n3=add_user"><button class="btn btn-success"><i class="fa fa-fw  fa-plus-circle"></i> button 2</button></a>&nbsp;
        <a href="#"><button class="btn btn-info"><i class="fa fa-fw  fa-eye"></i>button 3</button></a>                 
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
                        dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="z-index:inherit;overflow:visible;">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 2</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 3</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 4</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 5</a></li>
                    </ul>
                </div>                    
            </div>
        </div>
    </div>
</div>
<div class="row">
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-body">
                   <h3 class="box-title">Content</h3> 
                </div>
            </div>
       </div>
</div>

的CSS：

.hpanel > .panel-heading {
  color: inherit;
  font-weight: 600;
  padding: 10px 4px;
  transition: all .3s;
  border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
  border-bottom: none;
}
.hpanel > .panel-footer {
  color: inherit;
  border: 1px solid #e4e5e7;
  border-top: none;
  font-size: 90%;
  background: #f7f9fa;
}
.hpanel.panel-collapse > .panel-heading,
.hpanel .hbuilt {
  background: #fff;
  border-color: #e4e5e7;
  border: 1px solid #e4e5e7;
  padding: 10px 10px;
  border-radius: 2px;
}
.hpanel .panel-body {
  background: #fff;
  border: 1px solid #e4e5e7;
  border-radius: 2px;
  padding: 20px;
  position: relative;
}
.panel-body .panel-heading{
  padding: 10px 0px;
}
.panel-collapse .panel-body {
  border: none;
}
.hpanel {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}

Answer 1

使用root/ index.html server/ index.php .htaccess作为下拉菜单（并删除其他样式属性）。 position: absolute;与此问题无关。如果有疑问，请始终查看CSS Reference。

Updated fiddle

第二个面板主体隐藏的Bootstrap下拉菜单

1 个答案: