引導標籤不對齊正確

我想爲每個選項卡形式的形式，但表單字段是完全錯位：引導標籤不對齊正確

至於我可以告訴大家，我在下面的引導的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>

來源

2014-09-19 bard

在Liveweave鏈接代碼是不夠的？我的代碼幾乎完全一樣，只是我有for循環來生成一些html。我有第二個liveweave鏈接中顯示的相同問題。 – bard 2014-09-19 13:32:51

這是足夠的人，不用擔心，有些人使澤爾... – pbenard 2014-09-19 13:34:04

這是一個好主意，包括代碼在你的問題。發佈鏈接如liveweave和jsfiddle應該被認爲是額外的，而不是最低的 – hotforfeature 2014-09-19 13:34:51

第一個具有以下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">

我不會混並匹配相同的圖書館CDNs，a只使用你信任的那些人。在第二個例子中的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的例子）

來源

2014-09-19 13:41:10 hotforfeature

引導標籤不對齊正確

回答

相關問題