Bootstrap 4 col-2与第6行对齐

Question

enter image description here

<div class="container">
    <div class="row">
        <div class="col-md-6 d-table float-left" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
    </div>
</div>

我需要使一个列与大列的行对齐。

有人知道怎么做吗？

Answer 1

对于这样的事情，我会考虑使用与Bootstrap兼容的 Masonry 之类的知名库。

// external js: masonry.pkgd.js

var $grid = $('.grid').masonry({
  columnWidth: 120,
  itemSelector: '.grid-item'
});

$grid.on('click', '.grid-item-content', function(event) {
  $(event.currentTarget).parent('.grid-item').toggleClass('is-expanded');
  $grid.masonry();
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.grid {
  background: #EEE;
  max-width: 1200px;
}

.grid-item {
  float: left;
}


/* item is invisible, but used for layout */

.grid-item,
.grid-item-content {
  width: 120px;
  height: 120px;
}


/* grid-item-content is visible, and transitions size */

.grid-item-content {
  width: 120px;
  height: 120px;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  -webkit-transition: width 0.4s, height 0.4s;
  transition: width 0.4s, height 0.4s;
}

.grid-item:hover .grid-item-content {
  border-color: white;
  background: #A2C;
  cursor: pointer;
}


/* both item and item content change size */

.grid-item.is-expanded,
.grid-item.is-expanded .grid-item-content {
  width: 360px;
  height: 240px;
}

.grid-item.is-expanded {
  z-index: 2;
}

.grid-item.is-expanded .grid-item-content {
  background: #F90;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="https://masonry.desandro.com/components/classie/classie.js"></script>

<h1>Masonry - animate item size</h1>

<p>Click items to toggle size</p>

<div class="grid">
  <div class="grid-item is-expanded">
    <div class="grid-item-content"></div>
  </div>
  <div class="grid-item">
    <div class="grid-item-content"></div>
  </div>
  <div class="grid-item">
    <div class="grid-item-content"></div>
  </div>
  <div class="grid-item">
    <div class="grid-item-content"></div>
  </div>
  <div class="grid-item">
    <div class="grid-item-content"></div>
  </div>
  <div class="grid-item">
    <div class="grid-item-content"></div>
  </div>
  <div class="grid-item">
    <div class="grid-item-content"></div>
  </div>
</div>