javascript - 列 Bootstrap

Question

所以，我正在使用 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

Answer 1

您可以将类和元素重叠起来；

可能的例子

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