具有 2 个输入的 Bootstrap 内联表单，它们之间的填充较少答案

【问题标题】：Bootstrap Inline form with 2 inputs with less padding between them具有 2 个输入的 Bootstrap 内联表单，它们之间的填充较少
【发布时间】：2016-03-15 21:48:16
【问题描述】：

我有一个用 twitter-bootstrap 制作的表单，它有 2 个内联输入字段，嵌套在 2 列中（参见下面的代码）

去除两个输入之间的填充使其看起来像下图的最佳方法是什么：

--问题

我是否应该为每个输入添加一个包装器和 id，然后添加像 padding-right: 0px; padding-left: 0px; 这样的自定义样式

或者有更好的方法来实现这一点？

表单 html

<form action="#" method="post" id="" class="sky-form ">
  <fieldset class="no-padding">
    <div class="row">
      <div class="col-lg-11 col-lg-offset-0">
        <div class="form-group">
          <label class="input">Left text field</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>

      <div class="col-lg-1 col-lg-offset-0">
        <div class="form-group">
          <label class="input pull-right ">RightF #</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>
    </div>
  </fieldset>
</form>

输出1 col-lg-11 col-lg-1

输出2 col-lg-10 col-lg-2

【问题讨论】：

我假设您使用的是 Bootstrap，如果是，则填充在列上，所以只需删除列上的填充而不是输入。
@acardoso，谢谢。在这种情况下，我必须添加自定义媒体查询，因为当列折叠时，左右两侧不应该有任何填充。
如果您只寻找lg，请执行以下操作：@media (min-width: 1200) { ... }，但实际上您应该使用输入插件getbootstrap.com/components/#input-groups
@acardoso @media (min-width: 1200) 这实际上是我已经尝试过的 :D 并且有效

标签： html css twitter-bootstrap

【解决方案1】：

我看到您正在使用 Bootstrap。该框架的编写方式是每列都添加填充。你的输出是正确的。您所要做的就是从列中删除填充。如下图：

<form action="#" method="post" id="" class="sky-form ">
  <fieldset class="no-padding">
    <div class="row">
      <div class="col-lg-11 col-lg-offset-0" style="padding-right:0">
        <div class="form-group">
          <label class="input">Left text field</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>

      <div class="col-lg-1 col-lg-offset-0" style="padding-left:0">
        <div class="form-group">
          <label class="input pull-right ">RightF #</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>
    </div>
  </fieldset>
</form>

【讨论】：

【解决方案2】：

两个内联元素之间有空格的原因是因为字体大小。阅读this 文章以了解如何删除它。

删除此空间的一种方法是提供负边距。

【讨论】：