Question

我构建了一个DIV嵌套，它构成了标题结构和主体之间的边界（它将放在基于Bootstrap 3的WordPress博客的header.php中）。减少到基础，100x100px块总是保持100px方块 - 当可用空间减少到小于100px时，块（通常会溢出或部分隐藏）下降到下一行 - 这被隐藏了溢出：隐藏声明。最终这些小块将包含单独的图像，这就是它们不能扭曲或部分溢出的原因。所以代码......

<div style="height:100px; width:100%; overflow: hidden;">
 <div style="max-width:1600px; margin: 0 auto;">
  <div style="width:50%; float:left;">
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
   <div style="height:100px; width:100px; float:right; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:right; background-color:red;"></div>
  </div>
  <div style="width:50%; float:right;">
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
   <div style="height:100px; width:100px; float:left; background-color:red;"></div>
   <div style="height:100px; width:100px; float:left; background-color:blue;"></div>
  </div>
 </div>
</div>`

编辑：有两组图像（左侧'看'中间的图像和右侧的图像也被镜像到'看'中心。所以最终的Divs在两侧消失。因此，令人费解的巢。请注意，撤销左翼和右翼意味着这些街区也可能从中间消失。

现在，据我所知，Bootstrap旨在通过列“步骤”遍历设备的各种屏幕宽度。而我的代码从最大屏幕/浏览器尺寸缩小到100像素步长。

因此，尽管我自学了Bootstrap '12列'方法，但我不确定如何正确标记我的代码以用于规范的Bootstrap CSS。这就是我的代码中没有ID或类的原因，而且一切都是内联的。

那里有没有可以指导我的Bootstrap专家？

Answer 1

如果我理解正确，你想要在一行中显示你的100px潜水，而不是将它们重新排列为在较小的屏幕上一个在另一个下面的列？

如果这是您的目标，您可以将100px div放入一个列中，如下所示：

<div class="container">
<div class="row">
<div id="image-border" class="col-md-12 col-sm-12 col-xs-12">
your divs go here
</div>
</div>
</div>

并在CSS中：

#image-border {
overflow-x: hidden;
}

正确的格式化我的流体DIV结构的方法，用于规范的Bootstrap 3 CSS标记

1 个答案: