带有display:block的输入html元素的奇怪行为

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

为什么使用

display:block

输入不能填充其父项的所有内容 容器，比如

div

does？它只填充容器：

宽度：100%（代码笔示例中红色边框输入的注释
width
）

为什么我要应用负的

左边距
来补偿父容器的
左填充，我的输入向左移动，但保持其原始宽度（如使用了
left
css属性）。难道它不需要表现吗
与块元素类似（例如
div
）：向左移动并保持不变
填充其父对象的所有宽度，不包括右填充

当我为我的

输入应用负右边距来补偿父母的右边距时，什么也没发生（看我的例子，比较orange div
带有红色输入）。为什么？那么像块元素这样的行为呢

---

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

如果你不想网格父元素上的填充影响它的子元素，请在块元素中用一个行类包围它的所有子元素

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

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

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

因此，您需要使元素的宽度为100%

。这就是引导样式形成元素的方式

与任何其他块元素一样，将其宽度设置为100%将允许它填充其容器的宽度。当您应用负数

左边距
时，宽度仍然相同（100%=容器宽度），这将导致出现间隙

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

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

为什么不去掉填充物呢？是的，这很简单，但我想了解这里发生了什么。仔细看看应用于元素的样式。
.container
和
.col-md-12
都在应用
左填充：15px；右侧填充：15px。您可能应该尝试删除这些属性，而不是尝试在子对象中处理这些属性。好的，您是对的，但这在我的情况下并不重要，我已经编辑了代码笔。主要问题是为什么带有display:block的输入行为与reqular块级别元素不同。是的，因为.row类从左到右设置负边距，所以它补偿.col-XX-Y类的填充。但是为什么我必须创建一堆嵌套的div，而不是一个div，或者最好只使用正确的css输入元素呢？所以我的问题的主要目的是理解带有display:blocks的输入html元素的行为，我认为你们混合了本机css和bootstrap，你们说你们在使用bootstrap，对吗？但是为什么我要做一堆嵌套的div而不是一个div呢“因为这就是引导的工作原理。bootstrap是css和其他ui技术，它们已经由其他一些人编写，用于帮助您引导ui开发。这意味着有一些已经编写好的css，如果页面上的html元素按照这些指导原则进行布局，它将生成它们所记录的内容。我的问题是理解带有显示的输入html元素的行为：block是的，您是对的。但输入元素的这种行为对我来说是相当新的，所以我要求解释一下，以了解其技术方面。当然，我将使用额外的div作为输入的包装，并在需要时手动将其填充设置为零。你能给我一些技术文档的链接吗，我可以在那里阅读相关内容？