Bootstrap選項卡式表單未正確對齊

Question

我希望每個選項卡都有一個表單，但是表單字段完全未對齊：

http://jsfiddle.net/r2guf086/

據我所知，我正在密切關注Bootstrap的示例代碼 。 怎么了

我的代碼：

<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

第一個具有以下CSS鏈接：

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

第二個有這個CSS：

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

我不會為同一個庫混用和匹配CDN，而只會使用您信任的CDN。 將第二個示例中的CSS更改為此，它將起作用

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

之前： http : //jsfiddle.net/awkbmn0L/

之后： http : //jsfiddle.net/1eznowf7/

（我從未聽說過liveweave，它在代碼中做了一些奇怪的顯示，所以我以jsfiddle為例）