尽管定制了内容，为什么我的专栏被吃掉了？

Question

我有一个列、一行和三个嵌套列。每列中都有一个 div 按钮。我没有故意使用引导默认按钮，我创建了自己的，只是你看到一列被吃掉了。

请看图片：

我几乎可以肯定 HTML 没有任何问题。 Main div col 设置为 col-md-1 以测试较小规模内的嵌套响应元素。有谁明白为什么 content(button) 的行为因为它对于列来说太大了，为什么在我的情况下列被吃掉了？

代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-1 col-xs-1">
    <div class="row" style="padding:0 !important;margin:0 !important;">
        <div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: green; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
        <div class="col-md-10 col-xs-10" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: red; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: black; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
    </div>
</div>

Answer 1

TL;DR

出现问题是因为列间距，默认为 30px。这意味着一列的最小宽度将始终为 30 像素，无论其大小如何。因此，当您有一列宽度小于 30 像素时，它实际上仍将具有 30 像素的总宽度，并且由于该填充，列将彼此吃。

---

详细说明

工作的 sn-p

首先，我想向您展示我设法获得的工作 sn-p。我已经从 HTML 标记中删除了内联样式，并添加了一些 CSS 类以提高可读性和理解性。

.pa-0 {
  padding: 0 !important;
}
.ma-0 {
  margin: 0 !important;
}
.my-button {
  display: block;
  height: 20vmin;
  border: none;
  outline: none;
  background: transparent;
}
.bg-green {
  background-color: green;
}
.bg-red {
  background-color: red;
}
.bg-black {
  background-color: black;
}
.bg-blue {
  background-color: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 pa-0 bg-blue">
      <div class="row ma-0">
        <div class="col-xs-1 pa-0 bg-green">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-10 pa-0 bg-red">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-1 pa-0 bg-black">
          <button class="button my-button" type="button">
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

---

问题

由于在 Bootstrap 中设置列​​和行的样式，出现了所描述的问题。您可能已经知道，列的每边有 15px 的装订线（填充），行的边距为 -15px，其目的是从父容器中删除填充（假设应用了正确的语法，即父容器是容器或柱子）。这意味着由父 div 创建的间距与行中的负边距一起被移除。

这是一种创建响应式设计的好方法，但它也有一个问题，就是您所描述的问题。因为 Bootstrap 中的所有元素都有box-sizing: border-box，这意味着一个元素的宽度是包括内边距的。

例如，如果您有一个宽度为 100px 的列，则其大小将被 gutter 减小，默认为 30px。因此，列的实际宽度将为70px。

话虽如此，让我们想想当该列的宽度小于 30px 时会发生什么。

我们的列现在宽度为 20 像素。由于我们需要将这个尺寸减小 30px 间距，我们通常会得到一个负宽度，这是不可能的。因此，该列的实际宽度将为 0，并且内边距仍将应用为 30px。

---

解决方案

只需创建一些实用程序类即可从列和行中删除填充和边距。这样，列将具有应有的大小，并且按钮将正确地适合其父级，而不会被其他元素的填充吃掉。

我对填充和边距实用程序类使用了与 Bootstrap 4 中相同的命名。在pa-0 中，p 来自填充，a 来自 all，0 来自设置为此属性的值。

---

初始 sn-p 的注意事项

我不确定您提供的标记是否与您通常使用的方式相同，但值得注意的是：

• 通常在 HTML 标记中设置内联样式是一种不好的做法¹;主要是因为关注点分离原则和您编写的样式的重用。在您的情况下，除了背景之外，您在三个地方为按钮使用了相同的样式 - 您可以创建一个新的 CSS 类并在所有三个地方使用它。
• 在 Bootstrap 网格系统中²，列需要始终是行的直接后代，并且行需要是容器或列的后代，如您所见在工作示例中。如果没有正确的引导标记，可能会出现意外的样式行为。

---

有用的链接

1. SO post: What's so bad about inline styling?
2. Separation of Concerns in Web Development at Wikipedia
3. The Bootstrap 3 grid system
4. box-sizing at CSS-Tricks
5. The Definitive Guide to Using Negative Margins at Smashing Magazine
6. Bootstrap 4 Spacing utility classes