css - 向 Bootstrap 3 表添加 margin ？

Question

我在一个 div 中有一个 Bootstrap 3 表格。它是这样定义的:

<div id="todays-table">
<table class="table">
    <thead>
        <tr>
            <th>Train Number</th>

            <th>Status</th>

            <th>Last Attempt</th>
        </tr>
    </thead>

    <tbody>
        <tr class="danger">
            <td>2001</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2005</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="success-row">
            <td>2006</td>

            <td>1</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2007</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2008</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2009</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2010</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2011</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2012</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>

        <tr class="danger">
            <td>2013</td>

            <td>0</td>

            <td>2015-05-12 11:25:16</td>
        </tr>
    </tbody>
</table>
</div>

问题是表格上没有填充，它像这样到达网络浏览器的最边缘:

如何向这个 Bootstrap 表添加填充？我试过 <div id="todays-table" style="padding: 20px;">和 table { padding: 20px; } ，两者都不起作用。请问有人可以指出正确的方向吗？

Answer 1

你想要边距，而不是填充:

#todays-table {
    margin: 20px;
}

Demo

更好的是，在可重用类上设置样式:

.padded {
    margin: 20px;
}

<div id="todays-table" class="padded">

也就是说，Bootstrap 的网格系统在不需要额外的 CSS 的情况下就可以很好地完成这类事情:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" id="todays-table">

Demo 2

http://getbootstrap.com/css/#grid