html - TD 内的 Bootstrap 网格

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>

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

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