如何使用仅适用于移动设备的Bootstrap隐藏部分文本
feedc0de
我有一张表，其中一列仅包含日期时间。我想隐藏日期，仅在移动设备（使用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>。我希望他们在同一条线上。宽屏用户应该注意，如果在小型浏览器中显示该页面，则该日期将被隐藏。
凯文·鲍索克斯（Kevin Bowersox）
要隐藏日期并仅在移动设备上显示时间，请使用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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用仅适用于移动设备的Bootstrap隐藏部分文本
- 2
隐藏仅适用于移动设备的元素-语义UI
- 3
仅适用于移动设备的轮播
- 4
如何在zurb Foundation中设置仅适用于移动设备的样式
- 5
z-index 在移动设备上适用于标题 cta 文本，但适用于桌面？
- 6
仅适用于移动设备且仅适用于 Woocommerce 单页的全宽非响应式 CSS
- 7
桌面上的 bootstrap 文本大小非常小，适用于较小的屏幕尺寸和移动设备
- 8
LocalStorage 不适用于移动设备？
- 9
Ajax 不适用于移动设备
- 10
高亮显示文本块中的部分文本不适用于所有listboxItems
- 11
如何创建适用于移动设备和桌面设备的粘性页脚？
- 12
UITextField alpha仅适用于文本
- 13
jQuery jScrollPane仅适用于文本
- 14
如何滚动到仅适用于桌面视图的ID，并在移动视图上默认使用它？
- 15
如何使Gaia的更改适用于设备
- 16
如何设置当前为桌面构建的Sencha ExtJS项目也适用于移动设备？
- 17
如何制作适用于移动设备和平板电脑的自适应Android应用程序？
- 18
如何制作适用于Web和移动设备的SVG响应式进度栏？
- 19
使用 powershell 读取文本文件仅适用于 powershell 屏幕命令，而不适用于脚本
- 20
适用于PC和移动设备的应用程序
- 21
适用于移动设备的Apache HTTPD重定向。
- 22
适用于移动设备的简单HTML5应用
- 23
适用于移动设备的Django CMS动态模板forlder
- 24
轮播不适用于移动设备的屏幕
- 25
jQuery Ajax调用不适用于移动设备
- 26
CSS3过渡不适用于移动设备
- 27
全屏背景不适用于移动设备
- 28
img div 不适用于移动设备
- 29
Twitter共享链接不适用于移动设备，但适用于台式机
我来说两句