我正在尝试在 Bootstrap 的帮助下制作一些 html 表单。我的一些输入必须与左侧或右侧没有间隙。但是 bootstrap .col-XX-Y block 通过左右填充有排水沟。所以我的想法是为我的输入元素使用负边距,并显示: block 。在这里我被困住了。 请引用这个codepen example .我面临着几件奇怪的事情:
为什么使用
display: block
的输入没有填满它的所有父级 容器,就像div
一样?它仅使用以下内容填充容器:width:100%;
(在 codepen 示例中为红色边框输入注释width
)为什么如果我应用负
margin-left
来补偿父容器的 左填充,我的输入向左移动,但保持其原始宽度(就像使用left
css 属性一样)。难道不需要表现 像 block 元素(例如div
):向左移动并保持 填充它的父级的所有宽度,不包括右填充?当我为我的
input
应用负右边距以补偿父级的右填充时,没有任何反应(看我的例子,比较橙色 div 红色输入)。为什么?像 block 元素这样的行为怎么样?
如果这是正常行为,你能给我一些带有解释的 html 标准文档的链接吗?
最佳答案
如果您不希望网格父元素上的填充影响其子元素,请将其所有子元素包围在具有 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>
关于html - 显示为 : block 的输入 html 元素的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31573981/