Bootstrap 面板边框-半径答案

【问题标题】：Bootstrap Panel Border-RadiusBootstrap 面板边框-半径
【发布时间】：2016-07-05 09:15:48
【问题描述】：

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

这会导致另一个问题，但是 .panel-heading div 现在与它的父 .panel div 重叠。我在 .panel div 上设置了 4px 边框半径，但是当面板关闭时，它与 .panel-heading div 重叠。我尝试在 .panel-heading div 上设置 4px 边框半径，然后使用 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}

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

JSFiddle

http://jsfiddle.net/81u6gwbf/

【问题讨论】：

当我将面板的溢出更改为可见（引导 3）时，面板半径没有任何区别。
你确定你的 HTML 是正确的吗？如果我将其粘贴到 a jsfiddle 中，我会得到空面板，一个有效的小提琴链接会有所帮助
我在原始问题中添加了一个 jsfiddle - 这显示了使用 js 的工作版本，但我更喜欢 css 解决方案？正如您将在面板关闭时看到的那样，角落是圆形的。当它打开时，面板标题的底部边框半径被移除

标签： javascript twitter-bootstrap panel

【解决方案1】：

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

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

...

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

【讨论】：

【解决方案2】：

如果没有 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

【讨论】：

这在 .panel 设置为 overflow:hidden 时有效，但我需要将其设置为 overflow:visible 以允许面板内的下拉菜单与容器重叠？根据jsfiddle.net/81u6gwbf