Bootstrap选项卡式表单未正确对齐

Question

I want to have a form for each tab, but the form fields are completely misaligned:

http://jsfiddle.net/r2guf086/

As far as I can tell, I'm following Bootstrap's example code quite closely. What is wrong here?

My code:

<h2 id="ingredients"><strong>Ingredients</strong></h2>
<hr />
<div class="row">

<!-- Nav tabs -->
<div class="col-xs-12">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#ingredients-1" role="tab" data-toggle="tab">#1</a></li>
    <li><a href="#ingredients-2" role="tab" data-toggle="tab">#2</a></li>
  </ul>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ingredients-1">
    <form class="form-horizontal" action='' method="POST">
      <fieldset>
        <div class="form-group">
          <div class="col-xs-12">
            <textarea name="product_ingredients" class="form-control" rows="10">xxx</textarea>
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-2 col-md-offset-10">
            <button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  <div class="tab-pane" id="ingredients-2">
    <form class="form-horizontal" action='' method="POST">
        <fieldset>
          <div class="form-group">
            <div class="col-xs-12">
              <textarea name="product_ingredients" class="form-control" rows="10">yyy</textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-2 col-md-offset-10">
              <button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

Answer 1

First one has the following CSS link:

<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">

Second one has this CSS:

<link class="cssdeck" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

I would not mix and match CDNs for the same library, and only use those which you trust. Change the CSS in the second example to this and it will work

<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">

Before: http://jsfiddle.net/awkbmn0L/

After: http://jsfiddle.net/1eznowf7/

(I've never heard of liveweave, and it was doing some weird display things to the code, so I went with jsfiddle for examples)