带有显示的输入 html 元素的奇怪行为：块

Question

我正在尝试在引导程序的帮助下制作一些 html 表单。我的一些输入必须与左侧或右侧没有间隙。但是引导程序 .col-XX-Y 块通过左右填充有排水沟。所以我的想法是为我的输入元素使用负边距，并显示：块。在这里我被困住了。 请参考此codepen example。我遇到了一些奇怪的事情：

1. 为什么输入 display: block 不能填满它的父级 容器，就像div 一样？它仅使用以下内容填充容器：width:100%;（注释 width 以获取 codepen 示例中的红色边框输入）

2. 如果我应用否定 margin-left 来补偿父容器的 左填充，我的输入向左移动，但保持原来的宽度（就像使用了left css 属性一样）。它不需要表现 像块元素（例如div）：向左移动并保持 填充其父级的所有宽度，不包括右填充？

3. 当我为 input 应用负右边距以补偿父级的右边距时，什么也没有发生（看我的例子，比较橙色 div 红色输入）。为什么？像块元素这样的行为呢？

如果这是正常行为，您能否给我一些指向 html 标准文档的链接以及对此的解释。

Answer 1

如果您不希望网格父元素上的填充影响其子元素，请将其所有子元素包围在一个带有 row 类的块元素中。

引导输入元素旨在跨越父元素的整个宽度，即使没有显示块样式属性。

<div class="col-md-12">
  <div class="row"> <!--this is what you need -->

  </div>
</div>

完整示例代码

<div class="col-md-12">
    <div class="row">
        <input type="text" placeholder='I\'m some damned input' />
    </div>
    <div class="row">
        <div>I am some div</div>
    </div>
</div>

Answer 2

表单元素的行为方式与常规块级元素不同。当您将 <input> 字段显示为块时，它不会填满整个宽度。

因此，您需要赋予元素width: 100%。这就是 Bootstrap 样式构成元素的方式。

像任何其他块元素一样，给它一个 100% 的宽度将允许它填充其容器的宽度。当您应用负数margin-left 时，宽度仍将相同（100% = 容器宽度），这将导致出现间隙。

我建议将 <input> 字段包装在 <div> 中，并对其应用负边距：

.wrap {
    margin: 0 -20px;
}
.wrap input {
    width: 100%;
    display: block;
}