Question

我有一个col，一行，还有三个嵌套列。每列内都有一个div按钮。我没有故意使用bootstrap默认按钮，而且我创建了自己的默认按钮，只是你看到有一列被吃掉了。

请看图片：

我几乎可以肯定HTML没有任何问题。主div设置为col-md-1以测试较小规模的嵌套响应元素。有没有人理解为什么内容（按钮）正在起作用，因为它对于列来说太大了以及为什么列在我的情况下被吃掉了？

这是代码：

<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。这意味着列的最小宽度始终为30px，无论其大小如何。因此，当您有一个宽度小于30px的列时，实际上它仍然会有30px作为总宽度，并且由于该填充，列将吃。

详细

工作代码

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

问题

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

这是创建响应式设计的一种巧妙方式，但它也存在一个问题，即您所描述的问题。因为Bootstrap中的所有元素都有box-sizing: border-box，所以它意味着元素的宽度包括填充。

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

说完后，让我们想一想当这列的宽度小于30px 时发生的事情。

我们的列现在宽度为20像素。由于我们需要通过30px排水沟减小这个尺寸，我们通常会得到负宽度，这是不可能的。因此，列的实际宽度将为0，并且填充仍将应用为30px。

解决方案

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

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

您的初始代码段

的注释

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

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

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

1 个答案:

TL; DR

详细

工作代码

问题

解决方案

您的初始代码段

有用的链接