Question

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

为什么使用display: block输入并不会填充所有父项容器，如div吗？它仅使用以下内容填充容器：width:100%;（注释width，用于代码集示例中的红色边框输入）
为什么我应用否定margin-left来补偿父容器左边填充，我的输入向左移动，但保持原始宽度（如果使用了left css属性）。它不必表现像块元素（例如div）：向左移动并保持填充它的父级的所有宽度，不包括右边填充？
当我为我的input应用负右边距以补偿父母的右边填充时，没有任何反应（看看我的例子，比较橙色div 用红色输入）。为什么？像块元素这样的行为怎么样？

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

Answer 1

如果您不希望网格父元素上的填充效果影响其子元素，请使用行类围绕块元素中的所有子元素。

Bootstrap输入元素意味着跨越父元素的整个宽度，即使没有显示块样式属性。

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

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

2 个答案: