为Bootstrap 3表添加保证金？

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>

问题是桌面上没有填充,它会像这样进入Web浏览器的边缘:

如何在此引导表中添加填充？我试过<div id="todays-table" style="padding: 20px;">和table { padding: 20px; },这两者都不工作.有人可以指出如何做到这一点的正确方向吗？

Answer 1

你想要保证金,而不是填充:

#todays-table {
    margin: 20px;
}

演示

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

.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">

演示2

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