Bootstrap 3-删除输入字段之间的太多空间，中间用短划线

Question

我希望输入框为：

但得到：

有什么办法可以消除两者之间的多余空白并获得所需的输出，而无需使用css边距。 我的代码如下：

<div class="row">
    <div class="col-md-2 employerEin">
        <input type="text" name="employerEIN1" maxlength="2" size="2" value=""
               class="form-control" id="employerEIN1" title="EIN">
    </div>
    <span class="col-md-1 employerEin">-</span>
    <div class="col-md-3">
        <input type="text" name="employerEIN2" maxlength="7" size="7" value=""
               class="form-control" id="employerEIN2" title="EIN">
    </div>
</div>

Answer 1

只需将.form-inline类添加到您的<form>

<div class="row">
    <form class="form-inline">
        <div class="form-group">
            <input type="text" name="employerEIN1" maxlength="2" size="2" value="" class="form-control" id="employerEIN1" title="EIN">
            -
            <input type="text" name="employerEIN2" maxlength="7" size="7" value="" class="form-control" id="employerEIN2" title="EIN">
        </div>
    </form>
</div>

---

编辑：由于OP的注释添加了其他代码

只需将.form-inline类添加到封闭的div中，以使这两个字段内联，然后根据需要继续添加其他字段

<div class="row">

    <!-- add the .form-inline class to the enclosing div -->
    <div class="form-group form-inline">
        <input type="text" name="employerEIN1" maxlength="2" size="2" value="" class="form-control" id="employerEIN1" title="EIN">
        -
        <input type="text" name="employerEIN2" maxlength="7" size="7" value="" class="form-control" id="employerEIN2" title="EIN">
    </div>

    <!-- add other form elements as needed -->
    <div class="form-group">
        <input type="text" name="field3" maxlength="2" value="" class="form-control">
    </div>
    <div class="form-group">
        <input type="text" name="field4" maxlength="7" value="" class="form-control">
    </div>

</div>