html - 引导嵌套网格布局,排水沟不起作用
问题描述
我是新来的。也许有人可以在这里帮助我。我也主要将我的想法设置为带有嵌套网格的引导布局。不幸的是,我无法调整列之间的装订线空间,因为我需要它用于我的其余布局。
我现在拥有的:
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right: 7.5px;
padding-left: 7.5px;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right: 7.5px;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left: 7.5px;
}
.start-cat-grid {
display: block;
position: relative;
margin-bottom: 15px;
}
.start-cat-grid:hover:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 10, .5);
z-index: 1;
}
.start-cat-grid:hover:before,
.start-cat-grid .mono,
.start-cat-grid img {
border-radius: 3px;
}
.start-cat-grid .text-wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.start-cat-grid h2 {
color: #fefefe;
text-transform: uppercase;
text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
font-size: 4.0rem;
line-height: 1.4;
}
.start-cat-grid p {
color: #fefefe;
text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
max-width: 80%;
margin: 0 auto;
font-size: 2rem;
line-height: 130%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="test">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="row no-gutter">
<div class="col-sm-5 ">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>
<div class="align-center text-wrapper">
<h2>1</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-7">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>
<div class="align-center text-wrapper">
<h2>2</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row no-gutter">
<div class="col-sm-3">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#E12882;height: 220px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>3</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-3">
<div class="row no-gutter">
<div class="col">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#084F8B;height: 102.5px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>4</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#127836;height: 102.5px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>5</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#8DBB2E; height: 220px" alt="6"></div>
<div class="align-center text-wrapper">
<h2>6</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row no-gutter">
<div class="col-sm-4">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
<div class="align-center text-wrapper">
<h2>7</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-5">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
<div class="align-center text-wrapper">
<h2>8</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-3">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#55ddff;height: 220px" alt="8"></div>
<div class="align-center text-wrapper">
<h2>9</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
</body>
</html>
您会看到我在布局中的数字4和5中挣扎。因为排水沟不适用于这两行。
任何人都可以看看并提示我可以做些什么来从第 3 列到 (4,5) 和 (4,5) 到 6 之间的 15px 获得相同的空间?
解决方案
我能够通过使用“css 网格”实现布局来解决我的问题。使用 css 网格可以更容易地转换相等的间隙,垂直和水平。
.startpage-css-grid {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(12, [col] 1fr);
grid-template-rows: [row] 220px [row] 102.5px [row] 102.5px [row] 220px;
}
.box {
display: block;
position: relative;
}
.box a,
.box img {
width: 100%;
height: 100%;
}
.box a {
display: inline-block;
}
.box img {
object-fit: cover;
}
.start-cat-grid:hover:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 10, .5);
z-index: 1;
}
.start-cat-grid .text-wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.start-cat-grid h2 {
color: #fefefe;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
font-size: 36px;
line-height: 42px;
}
.start-cat-grid p {
color: #fefefe;
text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
max-width: 80%;
margin: 0 auto;
font-size: 18px;
line-height: 22px;
}
.b1 h2,
.c1 h2,
.c3 h2 {
font-size: 24px;
line-height: 30px;
}
.b1 p,
.c1 p,
.c3 p {
font-size: 16px;
line-height: 22px;
}
.b2 h2,
.b3 h2 {
font-size: 20px;
line-height: 24px;
margin-bottom: 6px;
}
.b2 p,
.b3 p {
font-size: 14px;
line-height: 18px;
}
/* first row ---------------- */
.a1 {
grid-area: a1;
grid-column: col / span 5;
grid-row: row;
background: #F8B636;
}
.a2 {
grid-area: a2;
grid-column: col 6 / span 7;
grid-row: row;
background: #754494;
}
/* second row ---------------- */
.b1 {
grid-column: col 4 / span 3;
grid-row: row 2 / span 2;
background: #127836;
}
.b2 {
grid-column: col / span 3;
grid-row: row 2;
background: #084F8B;
}
.b3 {
grid-column: col / span 3;
grid-row: row 3;
background: #E12882;
}
.b4 {
grid-column: col 7 / span 6;
grid-row: row 2 / span 2;
background: #8DBB2E;
}
/* third row ---------------- */
.c1 {
grid-column: col / span 4;
grid-row: row 4;
background: #AE1713;
}
.c2 {
grid-column: col 5 / span 5;
grid-row: row 4;
background: #ed7800;
}
.c3 {
grid-column: col 10 / span 3;
grid-row: row 4;
background: #2a6496;
}
<div class="startpage-css-grid">
<div class="box a1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box a2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b3">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b4">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c3">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
</div>
推荐阅读
- unity3d - 播放跳跃动画时移动
- mysql - 将 mysql join 转换为 django orm
- ruby-on-rails - Sidekiq 延迟扩展没有为 *一些 * 工作生成电子邮件
- javascript - 如何等待创建/编辑实体模式窗口完成渲染并在 2sxc 模块中执行我的自定义 js 代码?
- python - 所以我想为我的不和谐制作一个机器人,如果我在我的 Instagram 上发布新帖子并运行该机器人,它将获得新帖子的链接并在那里分享
- swift - 将信息从 CKRecord 传递到用户定义的类类型
- android - 在撰写中单击时,DropDownMenu 不显示
- vulkan - VK_ERROR_NATIVE_WINDOW_IN_USE_KHR 是什么意思
- ruby-on-rails - Ruby数组根据条件拒绝元素
- speech-to-text - 如何防止认知 API 多次点击 webhook