twitter-bootstrap TD 内的 Bootstrap 网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25732320/
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
Bootstrap grid inside a TD
提问by Bart
I have a table with a column that holds grid-like data in a single TD:
我有一个表，其中有一列在单个 TD 中保存类似网格的数据：
1 $1,234.56
2 $2,000.00
11 $8,000.00
1 $1,234.56
2 $2,000.00
11 $8,000.00
Rather than specifying a table inside of the TD, I've attempted to use the Bootstrap 3 grid classes. This worked great when my table was small, but adding the grid to a larger table (with more columns) is behaving differently. When the table has too many columns, my two column grid within the TD is wrapping and looks like a one column grid like so:
我没有在 TD 内指定一个表，而是尝试使用 Bootstrap 3 网格类。当我的表很小时，这很有效，但是将网格添加到更大的表（具有更多列）的行为会有所不同。当表格有太多列时，我在 TD 中的两列网格正在换行，看起来像一个一列网格，如下所示：
1
$1,234.56
2
$2,000.00
11
$8,000.00
1
$1,234.56
2
$2,000.00
11
$8,000.00
The code I'm using is similar to this, though needs more columns to witness the problem. Full JSFiddle example here.
我使用的代码与此类似，但需要更多列来见证问题。完整的JSFiddle 示例在这里。
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header for 2 column grid</th>
</tr>
<tbody>
<tr>
<td>
Some content
</td>
<td>
<div class="row">
<div class="col-sm-2">1</div>
<div class="col-sm-10">1,234.56</div>
</div>
<div class="row">
<div class="col-sm-2">13</div>
<div class="col-sm-10">8,000.00</div>
</div>
</td>
</tr>
</tbody>
</table>
Does anyone have a better suggestion to preserve my two column grid in my TD, using Bootstrap or otherwise?
有没有人有更好的建议来使用 Bootstrap 或其他方式在我的 TD 中保留我的两列网格？
回答by Devin
change your HTML to
将您的 HTML 更改为
<td style="white-space:nowrap">
<div class="row">
<div class="col-xs-2">1</div>
<div class="col-xs-10">1,000.00</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-10">1,582.99</div>
</div>
</td>
and add this line to your CSS:
并将此行添加到您的 CSS：
.row .col-xs-2, .row .col-xs-10{display:inline-block; float: none}
回答by mkutyba
Change col-sm-...to col-xs-....
更改col-sm-...为col-xs-...。
But @George Cummins' suggestion should also be considered.
但@George Cummins 的建议也应该考虑。
回答by maioman
As George has said I'd use only bootstrap classes,
正如乔治所说，我只会使用引导程序类，
use container(or custom wrap) instead of table,
使用container（或自定义包装）代替table，
rowsfor tr,
rows对于tr，
and finally you divide your rows in columns (col-sm-2- col-sm-10) instead of td(or th)
最后你把你的行分成列（col-sm-2- col-sm-10）而不是td（或th）
回答by user2444499
This worked for me:
这对我有用：
td .row { margin-right: 0 !important; }
