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

Question

我想为每个选项卡创建一个表单，但表单域完全错位了:

http://jsfiddle.net/r2guf086/

据我所知，我正在关注 Bootstrap 的 example 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

第一个有以下 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 作为例子)