html - 如何使用 Bootstrap 减少两列之间的过多空间

Question

两个表单组之间的空间太大，如果我减少第一个表单组的列大小，它会出现在我不想要的下一行。我希望电子邮件地址更接近电话分机。有没有办法在不移动带有 css 左边距的电子邮件地址字段的情况下做到这一点？

    <div class="row">
        <div class="form-group col-md-5">
            <label for="telephoneNumber">Telephone Number</label>
            <div class="form-inline">
                <input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
                <input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
                <input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
                <input type="text" class="form-control" id="extension" maxlength="3" size="3">

            </div>
        </div>
        <div class="form-group col-md-4">
            <label for="emailAddress">Email Address</label>
            <input type="text" class="form-control" id="emailAddress">
        </div>
    </div>

Answer 1

一行的总列数等于 12。

您已经在第一列上设置了类 .col-md-5，这意味着它将占用可用宽度的大约 50%。您的下一专栏在那之后立即开始。一种解决方案是在您的第一个表单组中设置一个列较少的类，比方说 col-md-3。这是一个演示:http://output.jsbin.com/tipusi/1/