twitter-bootstrap 向 Bootstrap 3 表添加边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30195416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add margin to Bootstrap 3 table?
提问by heinst
I have a Bootstrap 3 table inside a div. It is defined like this:
我在 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>
The problem is there is no padding on the table and it goes to the very edges of the web browser like this:
问题是桌子上没有填充，它像这样到达网络浏览器的边缘：
How do I add padding to this bootstrap table? I tried <div id="todays-table" style="padding: 20px;">and table { padding: 20px; }, neither of which worked. Can someone point in the right direction on how to do this please?
如何向此引导表添加填充？我试过<div id="todays-table" style="padding: 20px;">and table { padding: 20px; }，都没有奏效。有人可以指出如何做到这一点的正确方向吗？
回答by isherwood
You want margin, not padding:
你想要边距，而不是填充：
#todays-table {
margin: 20px;
}
Better, set styles on a reusable class:
更好的是，在可重用的类上设置样式：
.padded {
margin: 20px;
}
<div id="todays-table" class="padded">
That said, Bootstrap's grid system does a nice job of that type of thing without additional CSS:
也就是说，Bootstrap 的网格系统在没有额外 CSS 的情况下可以很好地完成这种类型的工作：
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" id="todays-table">
回答by martincarlin87
Try adding some styles to the tds themselves
尝试为tds 本身添加一些样式
div#todays-table > table.table td {
padding: 20px;
}
EDIT
编辑
Just re-read the question, this should be more what you are after:
只需重新阅读问题，这应该更符合您的要求：
div#todays-table > table.table {
margin: 20px;
}
