bootstrap网格设置等高度

最新推荐文章于 2025-10-12 09:29:26 发布

原创最新推荐文章于 2025-10-12 09:29:26 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在HTML布局中遇到的等宽元素不同高的问题，并提供了两种解决方案：一种是利用Flex布局来确保元素的高度一致；另一种是通过负边距和填充的方法使元素高度相等，但该方法存在下边界隐藏的问题。

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		/*第一种*/
		/*.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}*/
/*第二种*/
/*.row{
    overflow: hidden;
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}*/

	</style>
	</head>
	
	<body>
		<div class="row">
			<div class="col-sm-6"  style="border: 1px solid  forestgreen;">
				<p>fdferf</p>
				<p>fdvfd</p>
			</div>
				<div class="col-sm-6" style="border: 1px solid firebrick;">
				<p>fdferf</p>
				<p>优快云 (Chinese Software Developer Network) 创立于1999年，是中国最大的IT社区和服务平台，为中国的软件开发者和IT从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。拥有超过3000万注册会员(其中活跃会员800万)、50万注册企业及合作伙伴。

旗下拥有:全球最大中文IT技术社区:csdn、权威IT专业技术期刊:《程序员》杂志、IT人力资源服务:科锐福克斯、IT技术学习平台:乐知教育、代码托管+社交编程平台:code、移动开发工具和服务聚合平台:mobilehub、IT专属求职网站:job、中文软件外包和项目交易平台:csto、程序员深度交流社区:iteye、中国最大技术管理者平台:CTO俱乐部、云计算产业人士沙龙:云计算俱乐部、面向移动开发者的技术组织:移动开发者俱乐部、面向全国大学生的技术组织:高校俱乐部。</p>
			</div>
		
		</div>
	</body>
</html>

如下图: