Bootstrap 3 - spacing issues

Question

I am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like

1. There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces.

2. I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.

This is the fiddle I have created to reproduce the problem.

.border {
  border: 1px solid;
}

.input-field {
  height: 20px
}

.custom-label {
  line-height: 3.3em !important;
}

.label-size {
  font-size: 10px;
  line-height: 2.1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <form class="form-horizontal">
    <div class="col-md-8">
      <div class="form-group">
        <label for="name" class="col-md-4 label-size">Name</label>
        <div class="col-md-8">
          <input type="text" id="name" class="form-control input-sm input-field">
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="gender" class="col-md-4 label-size">Gender</label>
        <div class="col-md-8">
          <select id="gender" class="form-control input-sm input-field label-size">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <label class="col-md-4 label-size custom-label">Functions</label>
        <div class="checkbox col-md-8 label-size checkbox-primary" >
          <label class="col-md-3">
            <input type="checkbox" id="Func1"> Func1</label>
          <label class="col-md-3">
            <input type="checkbox" id="Func2">Func2</label>
          <label class="col-md-3">
            <input type="checkbox" id="Func2">Func3</label>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="country" class="col-md-4 label-size">country</label>
        <div class="col-md-8">
          <select id="country" class="form-control input-sm input-field label-size">
            <option>Select</option>
			<option>1</option>
			<option>1</option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <div class="col-md-3">
          <label class="label-size">Options</label>
        </div>
        <div class="col-md-9">

          <div class="checkbox checkbox-primary label-size col-md-3">
            <!-- there is a for loop here-->
            <!-- For every run of loop, one div [with col-xs-4] below will be created. Since loop is not there, I am creating multiple divs manually -->
            <input id="check1" type="checkbox"> check1
          </div>

          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="addr" class="col-md-4 label-size">ADDR</label>
        <div class="col-md-8">
          <input type="text" id="addr" class="form-control input-sm input-field">
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <label for="authro" class="col-md-4 label-size">authro</label>
        <div class="col-md-8">
          <input type="text" id="authro" class="form-control input-sm input-field">
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="range" class="col-md-4 label-size">Range</label>
        <div class="col-md-3">
          <input type="text" id="range" class="form-control input-sm input-field">
        </div>
        <div class="col-md-2">
          to
        </div>
        <div class="col-md-3">
          <input type="text" id="range2" class="form-control input-sm input-field">
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <label for="ip" class="col-md-4 label-size">IP</label>
        <div class="col-md-8">
          <input type="text" id="ip" class="form-control input-sm input-field">
        </div>
      </div>
    </div>


    <div class="col-xs-10 ">
      <div class="form-group ">
        <div class="col-xs-4">
          <button class="btn btn-xs" type="button">Start</button>

        </div>

        <label class="col-xs-2 label-size">Order</label>

        <div class="radio" class="col-xs-4 label-size">

          <label>
            <input type="radio" name="order3">order3</label>
          <label>
            <input type="radio" name="order4">order4</label>

        </div>
      </div>

    </div>
 




</form>

</div>

Any help is much appreciated.

Answer 1

I made some format changes to your code see if this fix your need.
http://jsfiddle.net/ayang10/sbcobqz9/66/

.form-horizontal .control-label {
  text-align: right;
  margin-bottom: 0;
  padding-top: 7px;
}

should fix your format/alignments