поля формы укладываются друг на друга, а не рядом друг с другом в загрузочном блоке twitter.

Question

Я использую twitter bootstrap и пытаюсь создать одну строку, в которой два текстовых поля находятся рядом друг с другом. Вот мой код:

<div class="container"> 
    <div class="span12"> 
     <div class="row"> 
      <label for="question_content">Content: </label> 
      <textarea class="span3" id="question_content" name="question[content]" style="resize: none;"> 
      </textarea> 

      <label for="question_conversation">Conversation: </label> 
      <textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;"> 
      </textarea>  
     </div> 
    </div> 
</div> 

Однако по какой-либо причине элементы формы уложены друг на друга друг над другом. Как это исправить?

Answer 1

На Bootstrap 2 (и, судя по коду, это то, что вы используете) один быстро исправить может установить display:inline на label в пользовательском файле CSS, например так:

label { 
    display:inline 
} 

Вот демо : http://www.bootply.com/132699

EDITED: реальный Bootstrap-путь, однако, использовать .form-inline в вашем <form> элементе вместо:

<form class="form-inline"> 
    <div class="container"> 
     <div class="span12"> 
      <div class="row"> 
       <label for="question_content">Content: </label> 
       <textarea class="span3" id="question_content" name="question[content]" style="resize: none;"> 
       </textarea> 

       <label for="question_conversation">Conversation: </label> 
       <textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;"> 
       </textarea>  
      </div> 
     </div> 
    </div> 
</form> 

Смотрите документацию: http://getbootstrap.com/css/#forms-inline

А вот обновленный демо: http://www.bootply.com/132701