html - Bootstrap 面板样式

Question

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

这是我的面板，里面有一张 table 。我试图让该表成为面板主体的全宽(无填充)。我试过移除面板主体并在 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>

fiddle :http://jsfiddle.net/556bfpgz/1/

Answer 1

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

针对特定面板删除填充

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

然后去掉不必要的边距

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

Fiddle