Question

我有一个表格，其中包含一个TD格式的数据：

1 $ 1,234.56
2 $ 2,000.00
11 $ 8,000.00

我没有在TD内部指定表，而是尝试使用Bootstrap 3网格类。当我的表很小时，这很有用，但是将网格添加到更大的表（包含更多列）的行为则不同。当表格中有太多列时，我在TD中的两个列网格就像包裹一样，看起来就像一个列网格，如下所示：

1
$ 1,234.56
2
$ 2,000.00
11个
$ 8,000.00

我使用的代码与此类似，但需要更多列来见证问题。完整JSFiddle example here.

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

有没有人有更好的建议来保存我的TD中的两列网格，使用Bootstrap或其他？

Answer 1

将您的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>

并将此行添加到CSS：

.row .col-xs-2, .row .col-xs-10{display:inline-block; float: none}

see fiddle here

Answer 2

将col-sm-...更改为col-xs-...。

但是@George Cummins＆＃39;建议也应该考虑。

Answer 3

正如乔治所说，我只使用引导类，

使用container（或自定义换行）代替table，

rows tr，

最后您将行划分为列{（1 {1}} - col-sm-2）而不是col-sm-10（或td）

Answer 4

这对我有用：

td .row { margin-right: 0 !important; }

TD内部的Bootstrap网格

4 个答案: