作者：命运2502901041_350 | 来源：互联网 | 2023-05-25 20:30
我在使用Bootstrap为学校创建时间表时遇到问题.时间表应对移动设备和平板电脑做出响应.
大屏幕的视图效果很好,但是当它切换到移动视图时,它会用列更改行.
Tabletview:http://imgur.com/U3ger2a,6ThcH1l
Mobileview:http://imgur.com/U3ger2a,6ThcH1l#1
主要的html文件:
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
Timetable
| |
Monday |
Tuesday |
Wednesday |
Thursday |
Friday |
| 07:45 |1| 08:35 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 08:35 |2| 09:25 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 09:30 |3| 10:20 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 10:35 |4| 11:25 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 11:30 |5| 12:20 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 12:20 |6| 13:10 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 13:10 |7| 14:00 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 14:00 |8| 14:50 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 15:00 |9| 15:50 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 15:55 |10| 16:45 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 16:50 |11| 17:40 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 17:40 |12| 18:30 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 18:55 |13| 19:40 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 19:40 |14| 20:25 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 20:30 |15| 21:15 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
| 21:15 |16| 22:00 |
Lesson |
Lesson |
Lesson |
Lesson |
Lesson |
有谁知道,如何解决这个问题？
1> 小智..：
替换你的HTML代码行
同
和
同
见工作示例
推荐阅读
-
蜡笔小新 2023-12-14 19:14:56
-
本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ...
[详细]
蜡笔小新 2023-12-14 17:08:34
-
-
最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
-
本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter，并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ...
[详细]
蜡笔小新 2023-12-13 14:41:31
-
本文详细解释了Linux中的环境变量函数getenv、putenv、setenv和unsetenv的用法和功能。通过使用这些函数，可以获取、设置和删除环境变量的值。同时给出了相应的函数原型、参数说明和返回值。通过示例代码演示了如何使用getenv函数获取环境变量的值，并打印出来。 ...
[详细]
蜡笔小新 2023-12-13 12:01:03
-
本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息，并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境，并进行DNS解析。 ...
[详细]
蜡笔小新 2023-12-14 19:42:01
-
本文介绍了关于人工智能、神经网络和深度学习的知识点，并提供了YOLOv7基于自己的数据集从零构建模型完整训练、推理计算的详细教程。文章还提到了郑州最低生活保障的话题。对于从事目标检测任务的人来说，YOLO是一个熟悉的模型。文章还提到了yolov4和yolov6的相关内容，以及选择模型的优化思路。 ...
[详细]
蜡笔小新 2023-12-14 18:28:01
-
Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ...
[详细]
蜡笔小新 2023-12-14 17:38:12
-
在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ...
[详细]
蜡笔小新 2023-12-14 17:34:00
-
本文介绍了使用kotlin实现动画效果的方法，包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果，并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例，可以用来实现放大缩小的效果。 ...
[详细]
蜡笔小新 2023-12-14 17:29:08
-
本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
-
本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ...
[详细]
蜡笔小新 2023-12-14 16:06:38
-
本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ...
[详细]
蜡笔小新 2023-12-14 15:52:52
-
本文介绍了在Linux下安装Perl的步骤，并提供了一个简单的Perl程序示例。同时，还展示了运行该程序的结果。 ...
[详细]
蜡笔小新 2023-12-13 18:29:11
-
在开发app时，使用了butterknife后，在androidStudio打包apk时可能会遇到报错。为了解决这个问题，可以通过打开proguard-rules.pro文件进行代码混淆来解决。本文介绍了具体的混淆代码和方法。 ...
[详细]
蜡笔小新 2023-12-13 11:29:38
-
命运2502901041_350
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号