Bootstrap 4 引导定位与airbnb照片库中类似

我想像在airbnb画廊一样使用bootstrap 4定位我的区块

我试着像这里这样做，但我有它的两边有空格

---

如果没有这些空格，我怎么做呢？

Cols的父级应该始终为.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>

---

您可能应该仔细阅读

通常，每一行的每一个大小断点的col加起来应该是12，或者使用新的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>

1.
2.
3.
4.
5.
6.
7.
8-这个很长，会占用空间
9

---

将带有.row的div添加到第二个.col lg中-6@PavelT谢谢你，伙计！

<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>