javascript - 列引导

所以，我正在使用Bootstrap开发图片库...
问题是我不能使四个图像在顶部两个，顶部三个在左下角和垂直图像上。您可以在图像中看到我放置了四张图像，但垂直图像位于它们下方...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
            <img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
        </div>
</div>

我该怎么办？ here is the image

最佳答案

你可以融合阶级和元素;

可能的例子

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <img src="http://dummyimage.com/300x600" class="col-4">
    <div class="row wrap col-8">
      <img src="http://dummyimage.com/300x330" class="mb-auto col-6">
      <img src="http://dummyimage.com/300x330" class="mb-auto col-6">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
    </div>
  </div>
</div>

关于javascript - 列引导，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59688091/