html - Bootstrap：具有不同项目大小的自动调整网格布局？

Question

我正在开发一个需要按 4 列网格显示项目的项目。

像这样：

所以我把col-3课放在我的物品上。

但是有些项目很重要，我需要以两倍的宽度和高度显示它。

所以我将该项目类更改为col-6.

现在看起来像这样：

我可以改用桌子，但它对媒体不友好......

有没有办法让它看起来像这样而不会弄乱 div 结构？

标签： htmlcsstwitter-bootstraplayout

Answer 1

我会使用网格系统来保留您尚未在 boostrap 中实现的实际结构。

查看更多信息：https ://css-tricks.com/snippets/css/complete-guide-grid/ http://gridbyexample.com/

也请注意支持https://caniuse.com/#search=grid

这个想法是设置一个 4 列的网格，并使一些元素跨越 2 列和 2 行。用于网格子级的 CSS：

grid-row:auto /span 2;
grid-column:auto / span 2;

演示，第二或第三和第五

section {
  float: left;
  border:solid;
  width: 40%;
  margin: 0.5em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);  
  
  grid-template-rows:repeat(4, 1fr);
  grid-auto-flow: dense;
  grid-gap: 0.5em;
  padding: 0.5em;
  counter-reset: divs
}

div {
  background: teal;
  counter-increment: divs;
  min-height: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
  color: white;
}

div:before {
  content: counter(divs)
}

section:first-of-type div:nth-child(2) {
  grid-row: auto /span 2;
  grid-column: auto / span 2;
}

section+section div:nth-child(3),
section+section div:nth-child(5){
  grid-row: auto /span 2;
  grid-column: auto / span 2;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

或仅在悬停时跨越网格：

section {
  width:40%;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-gap:0.5em;
  padding:0.5em;
  counter-reset:divs
}
div {
  background:teal;
  counter-increment:divs;
  min-height:10vw;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5vw;
  color:white;
}
div:before {
  content:counter(divs)
}
div:hover{
  grid-row:auto /span 2;
  grid-column:auto / span 2;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>