列引导程序答案

【问题标题】：Columns Bootstrap列引导程序
【发布时间】：2023-03-19 16:46:01
【问题描述】：

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

【问题讨论】：

无法准确理解您的要求。你能举例说明应该如何显示图像吗？
imgur.com/a/H17hTO6 像这样

标签： javascript html css bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

这是一个建议

.col {
  margin: 5px;
  height: 200px;
}

.col-4 {
  margin: 5px 0px;
}

.col-4,
.col {
  background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
  <div class="col-4"></div>
</div>

【讨论】：