Question

我试图用bootstrap创建一个连接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个声明。其余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个，4个，3个，2个等等。

为了确保您的圈子永远不会影响其边界（从而重叠），您需要设置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">：）

希望这有帮助！：）

Answer 2

由于bootstrap列是灵活的（以％表示而不是在px中），因此应设置最大值（以百分比表示）。

a div{
  width: 200px;
  height: 200px;
  max-width: 100%;
  background-color: #858585;
  border: 4px solid black;
  border-radius: 100%;
  margin-bottom: 2px;
}

Bootstrap网格列重叠

2 个答案: