Question

我正在使用Legacy Bootstrap 2.3，我在使一些CSS正常工作时遇到了一些麻烦。

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

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

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

Answer 1

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

针对某个面板移除填充

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

然后删除不必要的边距

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

Fiddle

Bootstrap面板样式

1 个答案: