Question

我正在尝试使用Bootstrap创建以下内容（模型） https://i.stack.imgur.com/vkgBu.jpg

这个想法是，每个正方形都是一幅图像，当单击背景图像时，当它们出现/消失时，我将使用Javascript控件。我遇到的麻烦是像我一样将小方块堆叠在顶部。我在这里做过研究，独自尝试了很多东西，但是虽然接近但没有雪茄。

这是我最近的一次（首先测试1行）。 https://i.stack.imgur.com/mqTc1.jpg

正方形彼此相邻排列很好，但是它们未正确显示在同一网格列/行中。

相关HTML：

<div class="container-fluid">
    <div class="row-centered">
    <div class="row row-centered">
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img"> 
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">

        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
    </div>
    <div class="row row-centered">
        <div class="col- col-centered">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
</div>

CSS：

.character-img{
    position: relative;
    z-index: 10;
}

.stock-img{
    position: relative;
    z-index: 20;
}

编辑：更新版本会产生更好的结果？包括将蓝色框添加到第二行。

HTML

<div class="container-fluid">
    <div class="row-centered">
    <div class="row row-centered">
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img"> 
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
    </div>
    <div class="row-centered">
    <div class="row row-centered">
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img">
            <img src="resources/images/blue.jpg" class="stock-img"> 
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
        <div class="col-2">
            <img src="resources/images/grey.jpg" class="character-img">
        </div>
    </div>
    </div>
</div>

CSS

.character-img{
position: relative;
z-index: 10;
}

.stock-img{
position: relative;
z-index: 20;
}

结果：https://imgur.com/vd3IZsP

Answer 1

根据您显示给我们的图像以描述您期望的结果，我认为Bootstrap是一个明智的选择。使用本机类可以实现您在布局中要做的许多事情。但是，很明显，您对Bootstrap框架缺乏基本的了解，我强烈建议您重新阅读其文档。

要尝试实现的结构的完整示例，请参见：http://www.acarlstein.com/?p=891

但是让我们看一下单个“框”项的HTML：

<div class="col-6 col-md-4 col-lg-3 mb-4">
  <div class="h-100 bg-secondary p-4">
    <img src="//placehold.it/200x200" class="rounded-circle img-fluid d-block mx-auto" />

    <div class="row mt-4">
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
      <div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
    </div>
  </div>
</div>

第一个<div>元素是一个列包装器，它提供有关会影响显示的断点的信息。从左到右以最小的断点（col-*）写入最大的断点。如果我们将其翻译为可读的内容，则可能显示为：

在最小断点处使用6/12列。在中等断点处开始使用4/12列，在较大的断点处使用3/12 列。

注意：col-sm-*存在，但此处未使用。由于未使用“小”断点，因此Bootstrap将默认使用下一个最小断点（在这种情况下，col-6

在列包装器内，我们还有另一个包含几个类的包装器：

.h-100 帮助我们创建等高项目，无论内容指示较小的高度。
.bg-secondary 是提供深色背景颜色的实用程序类
.p-4 是一个实用程序类，它在X和Y边距上都提供填充（4表示填充的“级别”，可以低至0或高至5）

至此，我们开始看到实际的内容。您的主图像具有几个影响其形状和位置的类：

.rounded-circle 是一个图像缩略图类，可强制使用圆形边框半径。
.img-fluid 是一种响应式类，可根据图像所驻留的元素来按比例放大和缩小图像。
.d-block 将img转换为块级元素
.mx-auto 将X边距设置为“自动”，结合d-block将图像居中。

从这里我们到达您原始帖子中引用的8个按钮/图像。 Bootstrap Grid是这种组织的完美解决方案，但是由于我们已经在Grid Element中使用内容，因此我们需要创建一个新的.row。

在新的.row中，我们只有一个断点列（.col-3），其中包含几个实用程序类：text-center将内容居中，而mb-2将底边距设置为p-*实用程序类更改填充的相似方式。

使用Bootstrap分层图像

1 个答案: