Question

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

赞：

所以我将col-3类放在我的项目中。

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

因此，我将该项目类别更改为col-6。

现在看起来像这样：

我可以改用表格，但它对媒体不友好...

有没有一种方法可以使它看起来像这样而不弄乱div结构？

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>

Answer 2

可以通过嵌套引导网格系统来完成。

<div class="container">
<div class="row text-center">
    <div class="col col-sm-3">
        <div class="row text-center">
            <div class="col col-sm-12">
                1
            </div>
            <div class="col col-sm-12">
                4
            </div>
        </div>
    </div>
    <div class="col col-sm-6">2
    </div>
    <div class="col col-sm-3">
        <div class="row text-center">
            <div class="col col-sm-12">
                3
            </div>
            <div class="col col-sm-12">
                5
            </div>
        </div>
    </div>
</div>
<div class="row text-center">
    <div class="col col-sm-4">
        <div>
            6
        </div>
    </div>
    <div class="col col-sm-4">
        <div>
            7
        </div>
    </div>
    <div class="col col-sm-4">
        <div>
            8
        </div>
    </div>
</div>

请参阅此答案Stackoverflow answer

引导程序：自动调整的网格布局具有不同的项目大小？

2 个答案: