Issue aligning form controls when using form-horizontal

[abishekrsrikaanth]

I am using the form-horizontal class to create my form. I am using the exact same code available at http://getbootstrap.com/css/#forms-horizontal but with a only exception that the second and third form group are col-md-6.

I have the same available on jsbin for your reference. How can i fix this alignment issue.
This used to work well in BS2, but not in BS3.

JSBin: http://jsbin.com/pebag/1/

Code for Horizontal Form:

  <form class="form-horizontal" role="form">
      <div class="col-md-12">
        <div class="form-group">
          <label class="col-md-3 control-label">Field 1</label>
          <div class="col-md-9">
            <input type="text" class="form-control" placeholder="Enter text">         
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-md-3 control-label">Field 1</label>
          <div class="col-md-9">
            <input type="text" class="form-control" placeholder="Enter text">         
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-md-3 control-label">Field 1</label>
          <div class="col-md-9">
            <input type="text" class="form-control" placeholder="Enter text">         
          </div>
        </div>
      </div>
  </form>

[felixcheruiyot]

+1 for this. Same problem here

[MrGeneric]

In the first row, your field label is 1/4 of the width, but in the second row your labels are 1/8.

The easiest thing I can think of is to change the first label to col-md-4, and the lower ones to col-md-2 so they'll be the same width, but this may not be ideal.

[cvrebert]

Not a bug. Like @MrGeneric points out, this is just how the grid system works. For how-to questions, ask on StackOverflow.