<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="dist/css/bootstrap.css"> <script src="jquery-3.2.1.js"></script> <script src="dist/js/bootstrap.js"></script> <title>栅格布局的列排序</title> <style> .grid { border: 1px solid #696969; border-radius: 5px; background-color: lightskyblue; min-height: 30px; text-align: center; line-height: 30px; } .green { background-color: lightgreen; } .pink { background-color: lightpink; } </style> </head> <body> <div> <h4>原来的顺序</h4> <div> <div class="col-md-9 grid green">.col-md-9</div> <div class="col-md-3 grid pink">.col-md-3</div> </div> <h4>排序后的顺序</h4> <div> <div class="col-md-9 col-md-push-3 grid green">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9 grid pink">.col-md-3 .col-md-pull-9</div> </div> </div> </body> </html>
以上是Bootstrap栅格布局的列排序实例的详细内容。更多信息请关注PHP中文网其他相关文章!
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影:贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 英文版
推荐:为Win版本,支持代码提示!