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

Question

There is too much space between two form-groups, if i reduce the column size of the first one it goes on next line which i don't want. I would like email address to be closer to phone extension. Is there any way to do this without moving email address field with css left margins?

    <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

The total number of columns on a row is equal to 12.

You have set the class .col-md-5 on your first column which means it would take about 50% of the available width. And your next column starts immediately after that. A solution would be to set a class with fewer column on your first form-group, let's say col-md-3 . Here's a demo: 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>

Add below css class

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