Question

我一直在尝试使用bootstrap实现这个（http://www.blacktie.co/demo/basic/）全宽响应库，但我还没有设法解决它。我很欣赏一个片段。另一件事是将来会有很多图像，那么还有其他更简单的方法来添加图像而不是添加代码块吗？

Answer 1

你实际上能够亲眼看看它是如何完成的。在任何给定的网页上，浏览器使您能够查看网站的前端源代码。

在Chrome上，这是：设置＆gt;更多工具＆gt;开发人员工具

对于有问题的网站，开发人员似乎确实使用了Bootstrap。

他还使用::before和::after选择器来实现预期效果。

以下是::before选择器的简要说明：

http://www.w3schools.com/cssref/sel_before.asp

Answer 2

您需要一个特定的高度来创建这样的网格。所以你需要获得一个特定的高度。

尝试使用它而不使用纯CSS中的Bootstrap（使用全屏）：

.img-grid {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  flex-basis: calc(20% - 2px);
  height: 140px;
  border: 1px solid #aaa;
  background: url('http://placehold.it/200x200');
  background-size: cover;
  background-position: center;
  position: relative;
}

.grid .text {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 181, 229, 0.8);
  transition: all .5s ease-in-out;
  opacity: 0;
}

.grid:hover .text {
  opacity: 1;
  transition: all .5s ease-in-out;
}

body {
  margin: 0;
}

<div class="img-grid">
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
  <div class="grid">
    <span class="text">Lorem Ipsum</span>
  </div>
</div>

希望这有帮助！

我无法使用bootstrap实现这种图像网格。有什么建议？

2 个答案: