Bootstrap内联表单，带有2个输入，两者之间填充较少

Question

我有一个用twitter-bootstrap制作的表格，其中2个输入字段内联嵌套在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>

output1 col-lg-11 col-lg-1

output2 col-lg-10 col-lg-2

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

Answer 2

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

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