Question

我有一个包含2个引导程序面板的页面，每个引导程序面板都包含引导程序下拉菜单。面板有溢出：隐藏的设置，当它们被打开时切断了下拉菜单。为了解决这个问题，我从.panel div中删除了溢出：隐藏值，这解决了问题。

这导致了另一个问题，但是.panel-heading div现在重叠了它的父.panel div。我在.panel div上设置了4px border-radius但是当面板关闭时，它与.panel-heading div重叠。我已经尝试在.panel-heading div上设置一个4px border-radius，然后使用javascript切换一个类，当打开面板时它会删除底部边框半径，这似乎有用，但我更喜欢使用CSS解决方案，如果可能的话？

HTML

 <div class="panel-group" id="accordion">
 <div class="panel panel-default">

 <div class="panel-heading radius">
 <a class="search-toggle collapsed" data-toggle="collapse"  data-parent="#accordion" href="#collapse1">Search</a></div>

    <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">
    <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Yes/No</a>
    <ul class="dropdown-menu">
    <li><a data-value="Yes">Yes</a></li>
    <li><a data-value="No">No</a></li></ul>
    </div></div></div></div></div>


    <div class="panel-group" id="accordion">
    <div class="panel panel-default">

    <div class="panel-heading radius">
    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Search</a></div>

    <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">

    <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Number </a>
    <ul class="dropdown-menu">
    <li><a data-value="1">1</a></li>
    <li><a data-value="2">2</a></li>
    <li><a data-value="3">3</a></li></ul>
     </div></div></div></div>

CSS

.panel-group .panel{border-radius:4px}
.panel-heading{border-radius:4px;padding:10px 15px}
.removeradius{border-bottom-left-radius:0px;border-bottom-right-radius:0px}

JS

$(".radius").click(function(){
    $(".panel-heading").toggleClass('removeradius');});

的jsfiddle

http://jsfiddle.net/81u6gwbf/

Answer 1

如果没有javascript，选择以前的兄弟姐妹是不可能的。您可以尝试这样的解决方法，但不确定has()选择器是否适用于所有浏览器

/*This matches all .panel-heading elements with direct child with class .collapsed*/
.panel-heading:has(> .collapsed) {border-radius:4px;} 
.panel-default > .panel-heading{background-color:blue;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding:10px 15px}

小提琴here

Answer 2

我只是在面板类上使用img-rounded ...就像这样：

<div class='panel panel-default img-rounded'>

...

在面板上给我一个漂亮的圆形边框。

Bootstrap Panel Border-Radius

2 个答案: