如何使用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

要隐藏日期并仅在移动设备上显示时间,请使用隐藏的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/