引导面板样式答案

【问题标题】：Bootstrap Panel Styling引导面板样式
【发布时间】：2015-05-06 06:39:37
【问题描述】：

我使用的是旧版 Bootstrap 2.3，但在让某些 CSS 正常工作时遇到了一些问题。

这是我的面板，里面有一张桌子。我试图让该表成为面板主体的全宽（无填充）。我曾尝试移除面板主体并在pannel-body 上添加padding: 0px，但这些似乎都不起作用。

如何为这个面板创建一个特殊的类，使表格跨越面板主体的整个宽度，但不影响页面上的其他面板？

<div class="panel">
<div class="panel-heading"> <span class="panel-title"><small>Details</small></span>
</div>
<div class="panel-body">
    <table class="table">
        <tbody>
            <tr class="success">
                <td>1</td>
                <td>TB - Monthly</td>
                <td>01/04/2012</td>
                <td>Approved</td>
            </tr>
            <tr class="error">
                <td>2</td>
                <td>TB - Monthly</td>
                <td>02/04/2012</td>
                <td>Declined</td>
            </tr>
        </tbody>
    </table>
</div>

小提琴：http://jsfiddle.net/556bfpgz/1/

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您为该 panel 设置一个唯一的类或 id，然后我们专门为该元素和子元素设置 css 样式。

针对某个面板删除填充

#custom-panel.panel {
    padding: 0;
}

然后去掉不必要的边距

#custom-panel .panel-heading {
    margin: 0;
}

Fiddle

【讨论】：