Bootstrap中的面板内面板不创建圆角答案

【问题标题】：Panel inside panel in Bootstrap not creating rounded cornersBootstrap中的面板内面板不创建圆角
【发布时间】：2014-11-14 12:02:58
【问题描述】：

使用 Twitter Bootstrap 绘制面板。我更改了填充和背景颜色，圆角不再呈现。

例子：

FIDDLE

<div class="panel-group">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <span class="panel-subtitle">Title</span>
        </div>
        <div class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="col-md-12" style="padding: 0px;">
                    <table class="table table-striped" style="margin-bottom: 0px;">
                        <thead>
                            <tr>
                                <th>A</th>
                                <th>B</th>
                                <th>C</th>
                                <th>D</th>
                                <th>E</th>
                                <th>F</th>
                                <th>G</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>ContentA</td>
                                <td>ContentB</td>
                                <td>ContentC</td>
                                <td>ContentD</td>
                                <td>ContentE</td>
                                <td>ContentF</td>
                                <td class="expand">
                                    <p>Sub-title</p>
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            <span class="panel-title semquebra menor">Sub-sub-title</span>
                                        </div>
                                        <div class="panel-body menor">
                                            <table class="table table-condensed">
                                                <tr>
                                                    <td colspan="2">
                                                        Inner text  
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

使用 CSS：

body{
    padding: 20px;
    background-color: #ffffff;
}


.panel-body {
    padding: 1px; /*Works, but set it to 0 and it doesn't works*/
    background-color: #ffffff;
    border-radius: 4px;
}

在 Fiddle 中，如果padding: 0px;，您可以看到外部面板没有圆角。将其更改为padding: 1px;，可以，但我需要 0px。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

和以前一样的问题。你有一个圆形盒子，里面有一块方形。这就是为什么它看起来像角落被切断了。

.panel-primary 是你的圆盒。

.table-striped>tbody>tr:nth-child(odd) 是你的方形块（它有背景，因为引导，它没有边框半径）。

所以我最终删除了该背景颜色并将其应用于其中的所有 td：

.table>tbody>tr>td {
  background-color: #f9f9f9;
  border-radius: 4px;
}

.table-striped>tbody>tr:nth-child(odd) {
  background: none;
}

http://jsfiddle.net/730sjq8n/6/

【讨论】：

谢谢，但如果我这样做，引导内置类 table-striped 将失去该功能，请看：jsfiddle.net/Khrys/730sjq8n/7
看起来你有你想要的。
其实，没有。外部面板仍然没有最后小提琴中的劣质圆角，这里：jsfiddle.net/Khrys/730sjq8n/7
在哪里？在我看来它是圆的。
将 padding: 0px; 更改为 padding: 1px; 并查看劣质外面板角