html - Bootstrap 网格列重叠

Question

我正在尝试使用 bootstrap 制作一个 connect 4 板，但是当我将一个圆圈添加到一个新列时，它会与其左侧的圆圈重叠。

这是我的 html 代码(这是一个例子，应该有 7 列):

<div class="container">

  <div class="row">
    <div class="col-md-offset-2 col-md-1">
      <a href="#"><div></div></a>
      <a href="#"><div></div></a>
    </div>
    <div class="col-md-1">
      <a href="#"><div></div></a>
      <a href="#"><div></div></a>
    </div>

</div>

这是我的 CSS:

.container{
text-align: center;
}
a div{
  width: 100px;
  height: 100px;
  background-color: #858585;
  border: 4px solid black;
  border-radius: 100%;
  margin-bottom: 2px;
}

这是输出:

circles overlapping

是因为圆圈的大小吗？

Answer 1

你的圈子是重叠的，因为你没有给他们 mkore 而不是他们的 Bootstrap 容器。你有一个硬编码的 100px ，但列声明非常窄(在 col-md-1 处)。

Bootstrap 列加起来总是 12。你总共有四个 -- 两个 md声明，加上 offset 中的 2 个.其余 8 列未被占用。这意味着您的内容将被挤压到左侧。

假设您想要七列(第一列偏移)，您可能正在寻找与此类似的结构:

<div class="row">
    <div class="col-md-offset-2 col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
</div>

以上col-md--声明全部加起来为 12，因此占据了整个宽度。请注意，您可以使用任何宽度组合来汇总多达 12 列 - 3 个四列、4 个三列、6 个二列等。

为确保您的圈子永远不会越界(因此重叠)，您需要设置一个 max-width 100%:

a div{
  max-width: 100%;
}

或者，如果您只需要两 列(如图所示)，您可以为它们设置更宽的列宽。只需将 (12 - [offset]) 除以您想要的列数，这就是您应该使用的规范。

在这种情况下，这是 5 ，当我们减去 2 的偏移量时来自 12 , 然后划分 10通过 2 ，给我们5 :

<div class="row">
    <div class="col-md-offset-2 col-md-5"></div>
    <div class="col-md-5"></div>
</div>

另请注意，您错过了结束语 </div>对于 <div class="row"> :)

希望对您有所帮助! :)