css - 在 div 之间添加空格会改变列布局
问题描述
我在 2 行中有 6 个固定高度的 div 标签的布局。当我在 div 周围添加任何边距时,最右边的 div 会被向下推一排。我该如何抵消这一点?
HTML:
<div class="container">
<div class="row">
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
ty
</div>
</div>
<div class="row">
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
hh
</div>
<div class="col-4 frontPageCells">
ty
</div>
</div>
</div>
CSS:
.frontPageCells{
background-color: white;
height: 200px;
margin: 2px;
}
试图用负填充值来抵消边距,但预测这没有任何作用
解决方案
一个简单的技巧是col-12
在你的col-4
div中添加
.frontPageCells {
background-color: red;
height: 200px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
</div>
<div class="row">
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
<div class="col-4 ">
<div class="col-12 frontPageCells">
hh
</div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- kotlin - Kotlin RecyclerView 在数据更改后不更新
- excel - 如何使用Textjoin在Excel列中合并文本
- gcc - 如何使用内联汇编在控制寄存器 (cr0) 中设置一个位?
- tomcat - 如何配置 Tomcat 以接受根请求?
- javascript - 每当输入可观察值发生变化时,如何正确重新计算布尔值?
- javascript - Javascript热图本地问题
- r - 展开数据框列
- graph - 简单图数据库
- django - 如何在 django 管理面板中使用 django-auditlog 更改存储记录中的 tz
- javascript - 该文件不存在,但我仍然收到错误