图片库，如 https://www.pexels.com/ 和 bootstrap 4答案

【问题标题】：Image gallery like https://www.pexels.com/ with bootstrap 4图片库，如 https://www.pexels.com/ 和 bootstrap 4
【发布时间】：2019-03-06 03:36:23
【问题描述】：

您好，我正在尝试使用 bootstrap 4 制作像 https://www.pexels.com/ 这样的图片库，但 bootstrap 并没有按照我想要的方式排列图片。

html

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">
      <img src="imgsource" alt="">
    </div>
  </div>
</div>

css

img{
   width: 100%;
}

我的结果 enter image description here

【问题讨论】：

Bootstrap 网格系统不是为提供您想要的自定义布局而构建的。您必须手动编写代码，或者可能使用某种 JavaScript 插件。
到目前为止，您完全没有做任何事情来实现您的目标，这意味着您希望我们免费为您工作。这很像说：我为客户制作了一个网站。现在我有另一个客户，我希望为第一个客户制作的网站将自己更改为第二个客户的网站。这是第一个客户的网站。请使用您认为应该产生您期望的结果的代码编辑您的问题。还请更新任何使您相信您的代码应该可以工作的资源/文档。
您将从中获得的最大帮助。 float: left

标签： html css

【解决方案1】：

        <!DOCTYPE html>
    <html>
    <head>
        <title>Gallery</title>

   <style>
ul {list-style: none}
 </style>
    </head>
    <body>
    <div class="row">
        <ul>
            <!-- first row  -->
            <li class="col-md-6"><img src=""></li>
            <li class="col-md-2"><img src=""></li>
            <li class="col-md-2"><img src=""></li>
            <li class="col-md-2"><img src=""></li>
            <!-- second row -->
            <li class="col-md-5"><img src=""></li>
            <li class="col-md-5"><img src=""></li>
            <li class="col-md-2"><img src=""></li>
            <!-- third row -->
        </ul> 
        </div>
    </div>
    </body>
    </html> 

  Height of the image must be same but width can vary. 
  Total screen contains 12 columns. According to the style choose the 
  column size.

【讨论】：

【解决方案2】：

我从未尝试过使用引导程序，但我是使用弹性盒自己构建的。试试下面的代码：

html:

<div class="photos" id="photoContainer">
  <div class="photos__columns">
    <div class="holders" id="0">

    </div>
  </div>
  <div class="photos__columns">
    <div class="holders" id="1">

    </div>
  </div>
  <div class="photos__columns">
    <div class="holders" id="2">

    </div>
  </div>
</div>

scss:

.photos {
  display: flex;
  max-width: 100%;
  &__columns {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 20px;
  }

  .holders {
    display: flex;
    flex-direction: column;
    .images {
      width: 100%;
      margin-bottom: 20px;
      height: auto;
    }
  }
}

Click to see the demo in my codepen

【讨论】：