如何使用Bootstrap仅为移动设备隐藏部分文本

Question

我有一个表，其中一列只包含日期时间。我想隐藏日期，只显示移动设备上的时间（使用Bootstrap）。我找到了课程visible-lg并试图用<span>来完成。

但为什么他们不在同一条线上？

<table class="table table-striped">
    <thead>
        <tr>
            <th>Timestamp</th>
            <th>Value A</th>
            <th>Value B</th>
            <th>Value C</th>
        </tr>
    </thead>
    <tbody>
        <tr data-timestamp="1390158176">
            <td><span class="visible-lg">01.19.14</span><span>20:02:56</span></td>
            <td>22.5</td>
            <td>950.91</td>
            <td>531.66</td>
        </tr>
    </tbody>
</table>

我还尝试将这两个<span>放在<span>中的<td>中。我还尝试将跨度后的时间缩短到<td>。我希望他们在同一条线上。如果广告用户在小型浏览器上显示该页面，则不应注意该日期将被隐藏。

Answer 1

要隐藏日期并仅在移动设备上显示时间，请使用课程hidden-xs：

<td><span class="hidden-xs">01.19.14</span><span>20:02:56</span></td>

当应用.hidden-xs样式时，您会注意到bootstrap.css将其显示设置为阻止，导致span标记占据列的整个宽度。虽然通常不推荐，但我看到的唯一选项（除了使用其他媒体查询之外）就是着火并在你自己的子类中使用!important。

<强> HTML

<td><span class="hidden-xs hidden-xs-inline">01.19.14</span><span> 20:02:56</span></td> 

<强> CSS

.hidden-xs-inline{
    display: inline-block !important;
}

JS小提琴： http://jsfiddle.net/3e6dz/