Question

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

enter image description here

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

Answer 2

<!-- HTML -->
<div class="row">
    <div class="form-group col-md-12">
      <div class="inline-block">
          <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="inline-block">
          <label for="emailAddress">Email Address</label>
          <input type="text" class="form-control" id="emailAddress">
      </div>
    </div>
</div>

<!-- CSS-->
.inline-block {display: inline-block;}

Answer 3

<div class="row">
    <div class="form-group col-md-5 no-padding">
        <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 no-padding">
        <label for="emailAddress">Email Address</label>
        <input type="text" class="form-control" id="emailAddress">
    </div>
</div>

添加以下css类

.less-padding {
   padding: 10px !important;
   margin: 10px !important;
}
.no-padding {
   padding: 0 !important;
   margin: 0 !important;
}

如何使用Bootstrap减少两列之间的太多空间

3 个答案: