像Airbnb照片库中的Bootstrap定位

Question

我想像在airbnb画廊中那样使用bootstrap 4来定位我的积木吗？

我试图像这里一样做，但是我在侧面留有空格

<div class="row">
  <div class="col-lg-6" style="background-color: red;">
    <a class="lightbox" href="./images/bg.jpg">
      <img src="./images/coast.jpg" alt="Coast">
    </a>
  </div>
  <div class="col-lg-6"style="background-color: green;">
    <div class="col-md-6">
      <a class="lightbox" href="./images/bg.jpg">
        <img src="./images/coast.jpg" alt="Coast">
      </a>
    </div>
    <div class="col-md-6">
      <a class="lightbox" href="./images/bg.jpg">
        <img src="./images/coast.jpg" alt="Coast">
      </a>
    </div>
    <div class="col-md-6">
      <a class="lightbox" href="./images/bg.jpg">
        <img src="./images/coast.jpg" alt="Coast">
      </a>
    </div>
    <div class="col-md-6">
      <a class="lightbox" href="./images/bg.jpg">
        <img src="./images/coast.jpg" alt="Coast">
      </a>
    </div>
  </div>
</div>

在没有这些空格的情况下我该怎么办？

Answer 1

Col应始终以.row为父项。将.row添加div到第二个.col-lg-6：

<div class="row">
  <div class="col-lg-6" style="background-color: red;">
    <a class="lightbox" href="./images/bg.jpg">
      <img src="./images/coast.jpg" alt="Coast">
    </a>
  </div>
  <div class="col-lg-6"style="background-color: green;">
    <div class="row">
      <div class="col-md-6">
        <a class="lightbox" href="./images/bg.jpg">
          <img src="./images/coast.jpg" alt="Coast">
        </a>
      </div>
      <div class="col-md-6">
        <a class="lightbox" href="./images/bg.jpg">
          <img src="./images/coast.jpg" alt="Coast">
        </a>
      </div>
      <div class="col-md-6">
        <a class="lightbox" href="./images/bg.jpg">
          <img src="./images/coast.jpg" alt="Coast">
        </a>
      </div>
      <div class="col-md-6">
        <a class="lightbox" href="./images/bg.jpg">
          <img src="./images/coast.jpg" alt="Coast">
        </a>
      </div>
    </div>
  </div>
</div>

Answer 2

您可能应该阅读grid system in Bootstrap 4

通常，每个ROW应该具有每个大小断点加起来为12的COL，或者使用新的bootstrap -auto来调整动态宽度列的宽度。您可以使用flexbox进行其他更复杂的选择，但遵循上述建议应该可以使您更加接近

<div class="row">
  <div class="col-md-6 col-lg-3">1</div>
  <div class="col-md-6 col-lg-9">2</div>
</div>
<div class="row">
  <div class="col-md-3">3</div>
  <div class="col-md-3">4</div>
  <div class="col-md-3">5</div>
  <div class="col-md-3">6</div>
</div>
<div class="row">
  <div class="col-md-3">7</div>
  <div class="col-md-auto">8 - this one is long and will take up space</div>
  <div class="col-md-3">9</div>
</div>

Try the fiddle