Question

我正在使用bootstrap，如果屏幕尺寸为XS，我有一个我想尝试和格式化的表格。

如果屏幕尺寸为SM或更大，我希望所有内容都在一行上。
如果屏幕尺寸为XS，我希望每条记录有两行。

下面的HTML显示了如果我知道屏幕大小，我将如何从服务器端格式化它。

当屏幕尺寸为SM或更大时：

<tr>
    <td>Description</td>
    <td>Code</td>
    <td>Category</td>
    <td>Price</td>
</tr>

当屏幕尺寸为XS时：

<tr>
    <td colspan=3>Description</td>
</tr>
<tr>
    <td>Code</td>
    <td>Category</td>
    <td>Price</td>
</tr>

当屏幕尺寸为XS时，并非所有内容都适合一行，我需要显示所有信息。有没有办法使用bootstrap css来完成这项工作？

Answer 1

如果您没有承诺在表格中显示信息（无论如何都会破坏很多类似网格的约束），那么您可以使用这样的引导网格系统轻松完成此操作：< / p>

<div class="row">
    <div class="col-xs-12 col-sm-3">Description can get really really long.</div>
    <div class="col-xs-4 col-sm-3">Code</div>
    <div class="col-xs-4 col-sm-3">Category</div>
    <div class="col-xs-4 col-sm-3">Price</div>
</div>

屏幕大小为XS时的表格格式

1 个答案:

Demo in jsFiddle