2014-09-19 1 views
0

Я хочу иметь форму для каждой вкладки, но поля формы полностью смещены:Bootstrap вкладок формы не выровненную правильно

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> 
+1

Код в ссылках liveweave не хватает? Мой код почти точно такой же, за исключением того, что у меня есть цикл для генерации некоторого html. У меня та же проблема, что и во второй ссылке liveweave. – bard

+1

Достаточно человека, не волнуйтесь, некоторые люди делают zel ... – pbenard

+0

Как правило, рекомендуется включать код в свой вопрос. Проводка ссылок, таких как liveweave и jsfiddle, должна считаться дополнительной, а не минимальной. – hotforfeature

ответ

0

Первый из них имеет следующую ссылку 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 для одной и той же библиотеки, и используйте только те, которым вы доверяете. Изменение 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 для примеров)

Смежные вопросы