html - 如何使用仅适用于移动设备的 Bootstrap 隐藏部分文本

Question

我有一个表格，其中一列仅包含日期时间。我想隐藏日期并只在移动设备上显示时间(使用 Bootstrap)。我找到了类(class) 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 fiddle : http://jsfiddle.net/3e6dz/