html – TD内部的Bootstrap网格

概述我有一个表,列中包含一个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 我有一个表,列中包含一个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 ><thead>    <tr>        <th>header 1</th>        <th>header for 2 column grID</th>    </tr><tbody>    <tr>        <td>            Some content        </td>        <td>            <div >                <div >1</div>                <div >1,234.56</div>            </div>            <div >                <div >13</div>                <div >8,000.00</div>            </div>        </td>    </tr></tbody></table>

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

解决方法 将您的HTML更改为

<td >        <div >            <div >1</div>            <div >1,000.00</div>        </div>        <div >            <div >2</div>            <div >1,582.99</div>        </div>    </td>

并将此行添加到您的CSS：

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

see fiddle here

总结

以上是内存溢出为你收集整理的html – TD内部的Bootstrap网格全部内容，希望文章能够帮你解决html – TD内部的Bootstrap网格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。