如何防止内容出现 - 响应式网页设计答案

【问题标题】：how to prevent content from appearing at all - responsive web design如何防止内容出现 - 响应式网页设计
【发布时间】：2013-03-15 02:02:19
【问题描述】：

是否可以根据设备的大小阻止某些数据出现？例如，我正在删除一个表格 - 我将其更改为由 <div> 标记组成的网格。

如果用户在桌面上，我希望能够显示如下内容：

<div class="row show-grid" id="tblheading" naming="tblheading">
        <div class="span1">Branch</div>
        <div class="span1">Branch Name</div>
        <div class="span1">Building</div>
        <div class="span1">Building Name</div>
        <div class="span1">Room</div>
        <div class="span1">Asset Name</div>
    </div>
    <div class="row show-grid">
        <div class="span1">CAN</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building1</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building1-Room1</div>
        <div class="span1">Value 123</div>
    </div>
    <div class="row show-grid">
        <div class="span1">CAN</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building2</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building2-Room1</div>
        <div class="span1">Value xyz</div>
    </div>

但如果它们在移动设备上，我不想显示带有标题的第一“行”。如果可能，我还想删除其他一些字段，只显示移动设备的资产名称。我只是响应式设计的新手，所以对于任何补救问题我深表歉意。如果您能指出我正确的方向，我将不胜感激。

谢谢。

【问题讨论】：

您在上面显示的数据看起来非常像表格数据 - 这是表格用于显示的内容。在这种情况下，将此表转换为 div 是否有真正的好处？

标签： css twitter-bootstrap responsive-design

【解决方案1】：

这只是在您想要隐藏的行/单元格中添加一个类，然后将该类设置为 display: none 在针对移动设备的媒体查询中的一种情况。我认为 twitter 引导程序甚至已经内置了这样的类，但不记得确切的名称。

【讨论】：

【解决方案2】：

如果您在 Bootstrap 文档中查看 here，它会讨论为此的内置类。

您可以使用这些类根据屏幕大小显示和隐藏列或行。如果差异足够大，您可以创建多个表格并为每种尺寸显示适当的表格。

【讨论】：