html - 显示为 : block 的输入 html 元素的奇怪行为

Question

我正在尝试在 Bootstrap 的帮助下制作一些 html 表单。我的一些输入必须与左侧或右侧没有间隙。但是 bootstrap .col-XX-Y block 通过左右填充有排水沟。所以我的想法是为我的输入元素使用负边距，并显示: block 。在这里我被困住了。请引用这个codepen example .我面临着几件奇怪的事情:

1. 为什么使用 display: block 的输入没有填满它的所有父级容器，就像 div 一样？它仅使用以下内容填充容器:width:100%;(在 codepen 示例中为红色边框输入注释 width)

2. 为什么如果我应用负 margin-left 来补偿父容器的左填充，我的输入向左移动，但保持其原始宽度(就像使用 left css 属性一样)。难道不需要表现像 block 元素(例如 div):向左移动并保持填充它的父级的所有宽度，不包括右填充？

3. 当我为我的 input 应用负右边距以补偿父级的右填充时，没有任何反应(看我的例子，比较橙色 div红色输入)。为什么？像 block 元素这样的行为怎么样？

如果这是正常行为，你能给我一些带有解释的 html 标准文档的链接吗？

Answer 1

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

Bootstrap 输入元素旨在跨越父元素的整个宽度，即使没有显示 block 样式属性也是如此。

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