在 Bootstrap 3 格子的中间是否可以有一个大单元格？

Question

是否可以使用 Bootstrap 3 网格 CSS 来拥有跨越行和列的更大的嵌套单元格？

Answer 1

不需要bootstrap。您只需要使用 grid-area 设置一个单元格。更多信息请点击这里 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

浏览器支持 grid-area https://caniuse.com/#search=grid-area thanks to Gerard

.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
min-height: 300px;
}

.grid > div {
background: #ccc;
}

.grid > div.my-big-sell {    
grid-area: 2 / 2 / 4 / 6;
background: #000;
}

<div class="grid">
  <div class="my-big-sell"> </div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>