在Bootstrap面板内面板不会产生圆角 [英] Panel inside panel in Bootstrap not creating rounded corners

问题描述

使用Twitter Bootstrap绘制面板。

示例：

我已经更改了填充和背景颜色，并且圆角不再显示。

FIDDLE

 < div class =panel-group> 
< div class =panel panel-primary> 
< div class =panel-heading> 
< span class =panel-subtitle>标题< / span> 
< / div> 
< div class =panel-collapse collapse in> 
< div class =panel-body> 
< div class =col-md-12style =padding：0px;> 
< table class =table table-stripedstyle =margin-bottom：0px;> 
< thead> 
< tr> 
< th> A< / th> 
 B< th> 
< th> C< / th> 
 D< th> 
< th> E< / th> 
 F< th> 
 th 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>小标题< / p> 
< div class =panel panel-primary> 
< div class =panel-heading> 
< span class =panel-title semquebra menor>子子标题< / span> 
< / div> 
< div class =panel-body menor> 
< table class =table table-condensed> 
< tr> 
< td colspan =2> 
内文
< / 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; / *工程，但设置为0，它不起作用* / 
 background-color：#ffffff; 
 border-radius：4px; 
 
  

在小提琴中，您可以看到外板没有劣质如果 padding：0px; ，则四舍五入。将其更改为 padding：1px; ，但我需要0px。 与以前一样的问题。你有一个里面有一个方块的圆盒子。这就是为什么它看起来像角落被切断。

.panel-primary 是您的圆形框。

p>

.table-striped> tbody> tr：nth-​​child（odd）是你的方块（它有一个背景因为bootstrap并没有边界半径）。

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

  .table> tbody> tr> td {
 background-color：＃f9f9f9; 
 border-radius：4px; 
} 
 
 .table-striped> tbody> tr：nth-​​child（奇数）{
 background：none; 
} 
  

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

Using Twitter Bootstrap to draw Panels. I have change the padding and background-color, and the round corners isn't get rendered anymore.

Example:

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>

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

In the Fiddle, you can see the outer panel doesn't have the inferior corners rounded if padding: 0px;. Changing it to padding: 1px;, works but I need 0px.

解决方案

Same problem as before. You have a round box with a square piece inside. That's why it looks like the corners are cut off.

.panel-primary is your round box.

.table-striped>tbody>tr:nth-child(odd) is your square piece (it has a background because of bootstrap and there's not border-radius to it).

So what I ended up removing that background colour and applied it to all the td within it instead:

.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面板内面板不会产生圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！