0

是否可以根据设备的大小防止某些数据出现？例如，我正在删除一个表格 - 我正在将其更改为由<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>

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

谢谢。

4

2 回答 2

0

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

于 2013-03-25T14:27:27.017 回答
0

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

在此处输入图像描述

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

于 2013-03-25T14:27:43.047 回答