Question

使用Twitter Bootstrap绘制面板。我已经更改了填充和背景颜色，并且不再渲染圆角。

示例：

<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;
}

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

Answer 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/

Bootstrap中的面板内部面板不会创建圆角

1 个答案: