吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:清除浮动
2024-10-08 16:07:59
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap .clearfix 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> <div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:lavender;">
列 1<br>
重置窗口大小,查看效果。也尝试删除有 clearfix 的 div 查看效果。
</div>
<div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>
<div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>
</div>
</div> </body>
</html>
最新文章
- C#将Word转换成PDF方法总结(基于Office和WPS两种方案)
- Android -- ViewDragHelper
- 在mac os下的Apache服务器的cgi中运行python
- C# winform带进度条的图片下载
- 使用indent命令帮助排版源代码
- Android 滑动界面实现---Scroller类别 从源代码和开发文档了解(让你的移动布局)
- Java开发步骤
- [BZOJ]1011 遥远的行星(HNOI2008)
- C语言使用HZK16显示每个像素的代码
- 反射 XML和JSON
- 6.2 小表驱动大表(exists的应用)
- 【BZOJ4653】【NOI2016】区间 线段树
- R语言学习网址
- spring之文件上传
- Python在cmd上打印彩色文字
- js setInterval详解
- 余玄相似度,TF-IDF
- wxss解析
- 【LeetCode 234_链表】Palindrome Linked List
- 虚拟化环境下的CentOS7网络环境存在的问题