搜索
写文章提问
登录注册
展开

专栏首页十月梦想bootstrap栅格换行时产生空白解决

bootstrap栅格换行时产生空白解决

阅读 7080

最近使用bootstrap开发项目,但是用到全局css样式中栅格时候出现问题,就是当前窗口的首行正常显示,到了第二行开始则开始不能正常排布!

实例图如下:

经测试.使用clearfix类可以解决这个问题,但是改变窗口大小,相应设备时候又出现了相同问题,只要是从第二行起,就出现上述问题,明显单纯的clearfix不是解决问题的妙招!

经过分析,超找相关问题得出以下结论

由于元素块的高度不同产生错位,根据这个进行解决问题,需要响应的内容放在同一个row里面!给每个元素块一个固定高度!问题解决!下面附上这个案例代码!

  <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>栅格测试</title>
    		<link rel="stylesheet" href="bs/css/bootstrap.css" />
    		<script src="jquery-1.11.3.js"></script>
    		<script src="bs/js/bootstrap.js"></script>
    		<style>
    			.thumbnail{
    				overflow: hidden;
    			}
    		</style>
    	</head>
    	<body>
    							<div class="container">
    						<h3 class="text-center">推荐课程</h3>
    						<p class="text-center">我们将紧随市场动态，准确把握每一个需求爆点，为你第一时间奉上实战前沿的技术视频。 市场的需求就是我们的追求，
    						来后盾人学习掌握前沿的企业级开发技术，成就高薪指日可待！</p>
    						<div class="row">
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l1.jpg"  alt="..." >
    										<h4>集成化开发环境使用【新手必学】</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>1575</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    											<img src="img/l2.jpg" alt=""  />
    								<h4>Git版本控制你需要掌握</h4>
    								<p>
    									<span class="pull-left"><i class="glyphicon glyphicon-user"></i>7480</span>
    									<span class="pull-right"><i class="fa fa-clock-o"></i>4小时</span>
    								</p>
    									</div>
    								</div>
    							</a>
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l3.jpg" alt=""  />
    										<h4>phpstorm最强的PHP开发工具</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>4666</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l4.jpg" alt=""  />
    										<h4>homestead构建统一开发平台</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>5839</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    														<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l4.jpg" alt=""  />
    										<h4>homestead构建统一开发平台</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>5839</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    														<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l4.jpg" alt=""  />
    										<h4>homestead构建统一开发平台</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>5839</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    						</div>
    					</div>
    	</body>
    </html>

修正后的代码如下

  <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>栅格测试</title>
    		<link rel="stylesheet" href="bs/css/bootstrap.css" />
    		<script src="jquery-1.11.3.js"></script>
    		<script src="bs/js/bootstrap.js"></script>
    		<style>
    			.thumbnail{
    				overflow: hidden;
    				height:240px;
    			}
    		</style>
    	</head>
    	<body>
    							<div class="container">
    						<h3 class="text-center">推荐课程</h3>
    						<p class="text-center">我们将紧随市场动态，准确把握每一个需求爆点，为你第一时间奉上实战前沿的技术视频。 市场的需求就是我们的追求，
    						来后盾人学习掌握前沿的企业级开发技术，成就高薪指日可待！</p>
    						<div class="row">
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<div class="img">
    										    <img src="img/l1.jpg"  alt="..." >
    										</div>
    										<h4>集成化开发环境使用【新手必学】</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>1575</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    											<img src="img/l2.jpg" alt=""  />
    								<h4>Git版本控制你需要掌握</h4>
    								<p>
    									<span class="pull-left"><i class="glyphicon glyphicon-user"></i>7480</span>
    									<span class="pull-right"><i class="fa fa-clock-o"></i>4小时</span>
    								</p>
    									</div>
    								</div>
    							</a>
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l3.jpg" alt=""  />
    										<h4>phpstorm最强的PHP开发工具</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>4666</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    							<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l4.jpg" alt=""  />
    										<h4>homestead构建统一开发平台</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>5839</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    														<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l4.jpg" alt=""  />
    										<h4>homestead构建统一开发平台</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>5839</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    														<a href="">
    								<div class="col-md-3 col-sm-6">
    									<div class="thumbnail">
    										<img src="img/l4.jpg" alt=""  />
    										<h4>homestead构建统一开发平台</h4>
    										<p>
    											<span class="pull-left"><i class="glyphicon glyphicon-user"></i>5839</span>
    											<span class="pull-right"><i class="fa fa-clock-o"></i>1小时</span>
    										</p>
    									</div>
    								</div>
    							</a>
    						</div>
    					</div>
    	</body>
    </html>

给每个img包围一个父级class取名为.img设置样式

//给包围img图片的类设置宽度占用thumnail的100%,高度固定(自己根据情况设置)
.thumbnail .img{
    width:100%;
    overflow:hidden;
    height:150px
                      
}
//显示图片为了可以响应显示,设置最大最小宽度为100%高度为父级的高度!
.thumbnail .img img{
    max-width:100%;
    min-width:100%;
    height:150px;
}

修正后的代码就是这样,给每个img新增.img类,设置上述样式,解决高度不固定产生空白问题~!

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

展开阅读全文
举报

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想

  • 移动端适配之百分比适配

    前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

    十月梦想

  • bootstrap之图片的响应式

    前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

    十月梦想

  • 分享个天气网7日天气样式

    最近项目里面用到了天气网“7日天气”的功能，本来想趴一个样式的，可是看了看太费劲，索性自己写吧，分享下。

    lzugis

  • Bootstrap Metronic 学习记录（二）菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2）.动态生成菜单（无限级别树） 2.系统环境配置 项目需要程序数据支撑，这里选择MVC5.0+EF6.0[S...

    用户1149182

  • Django+xadmin打造在线教育平台（七）

    代码 github下载 十、授课教师  10.1.讲师列表页 拷贝teacher-list.html和teacher-detail.html到template...

    zhang_derek

  • 使用 Vue.js 和 Semantic-UI 做一个简单的愿望清单

    周末用 Vue.js 和 Semantic-UI 做了一个简单的愿望清单，记录以后想和喜欢的人一起做的事，疲惫的生活里总要有些温柔的梦想吧。

    叶庭云

  • jquery点击删除按钮,删除当前的div

    现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全都删掉了，但是我只需要点击哪一行div里面的删除按钮，就删除哪一行，其实很简单，只需要...

    王小婷

  • ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    Bootstrap为我们提供了十几种的可复用组件，包括字体图标、下拉菜单、导航、警告框、弹出框、输入框组等。在你的Web Application中使用这些组件...

    用户1161731

  • electron 仿制QQ登录界面

    注意 不要使用内置的拖动 我们要自己实现! 在页面中加入以下代码就可以实现拖动了!

    李昊天
更多文章

作者介绍

十月梦想

专栏

精选专题

活动推荐

运营活动

活动名称
广告关闭

扫码关注云+社区

领取腾讯云代金券