Twitter Bootstrap 3 рядных и горизонтальная форма

Question

Я пытаюсь перенести свою форму Bootstrap 2 загрузчика 3.
Моего текущего кода и скрипку: http://jsfiddle.net/mavent/Z4TRx/

<div class="" id="myDialog1"> 

    <div class="" id="myDialog2"> 

     <form role="form" class="" id="contactForm" onsubmit="send(); return false;"> 
      <label>Please fill the form</label> 
      <br/><br/> 

      <div class="form-group"> 
       <label for="name">My Label 2</label> 
       <input type="text" class="form-control" name="name" id="name" required="required" value="myName"> 
      </div> 

      <div class="form-group"> 
       <label for="email">My Label 3</label> 
       <input type="email" class="form-control" name="email" id="email" required="required"> 
      </div> 

      <div class="form-group"> 
       <label for="message">My Label 4</label> 
       <textarea class="form-control" name="message" id="message" required="required"></textarea> 
      </div> 

      <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button> 
     </form> 

    </div> 


</div> 

Я хочу инлайн поведения, моя метка 2 будет рядом с текстовым вводом моя метка 3 будет рядом с текстовым вводом. Мне также нужно горизонтальное поведение, мой ярлык 4 будет поверх текстового поля. В текстовом поле моей метки 2 и моей метки 3 будет 4 ширины столбца, ширина моей метки 4 будет иметь полную ширину формы.

Как я могу сделать это в Bootstrap 3?

Answer 1

Просто потому, что документы предполагают, вы должны использовать элементы управления формы не означает, что вы должны. Вы можете использовать встроенную систему сетки для достижения макета. См. http://bootply.com/82900 для рабочего примера. Код ниже:

<div class="container"> 
    <form role="form"> 
    <div class="row"> 
     <label class="col-xs-4" for="inputEmail1">Email</label> 
     <div class="col-xs-8"> 
     <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> 
     </div> 
    </div> 
    <div class="row"> 
     <label class="col-xs-4" for="inputPassword1">Password</label> 
     <div class="col-xs-8"> 
     <input type="password" class="form-control" id="inputPassword1" placeholder="Password"> 
     </div> 
    </div> 
    <div class="row"> 
     <label class="col-xs-12" for="TextArea">Text Area</label> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <textarea class="form-control" id="TextArea"></textarea> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <button type="submit" class="btn btn-default">Sign in</button> 
     </div> 
    </div> 
    </form> 
</div> 

UPDATE: Просто понял, что я бросил теги этикетке. Обновлен ответ, обмен <label> на <div>.

ОБНОВЛЕНИЕ: Обновление кода для отражения необходимости в этом макете в малой ширине, как об этом говорится в комментариях ниже. См. http://jsfiddle.net/8xxUV/3 для рабочего примера.

Answer 2

То, что вы ищете, на самом деле не в строгом режиме, просто горизонтальное.

Этот код должен помочь:

<div class="" id="myDialog1"> 
    <div class="" id="myDialog2"> 
     <form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;"> 
      <label>Please fill the form</label> 
      <br><br> 
      <div class="form-group"> 
       <label for="name" class="col-lg-3 col-sm-3">My Label 2</label> 
       <div class="col-lg-7 col-sm-7"> 
        <input type="text" class="form-control" name="name" id="name" required="required" value="myName"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="email" class="col-lg-3 col-sm-3">My Label 3</label> 
       <div class="col-lg-7 col-sm-7"> 
        <input type="email" class="form-control" name="email" id="email" required="required"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="message" class="col-lg-3">My Label 4</label> 
       <div class="col-lg-10 col-sm-10"> 
        <textarea class="form-control" name="message" id="message" required="required"></textarea> 
       </div> 
      </div> 

      <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button> 
     </form> 
    </div> 
</div> 

И выглядит следующим образом:

В col-sm-* теги не являются обязательными - они просто остановить элементы от укладки, как вы размер окна вниз.

Вы можете попробовать его здесь: http://bootply.com/82889

Answer 3

вы можете попробовать этот код

<div class="" id="myDialog1"> 



     <form role="form" class="" id="contactForm" onsubmit="send(); return false;"> 
      <div class="clearfix igr col-md-12"> 
       <label>Please fill the form</label> 
      </div> 

      <div class="clearfix igr col-md-12"> 
       <div class="col-md-2"> 
        <label for="name">My Label 2</label> 
       </div> 
       <div class="col-md-3"> 
        <input type="text" class="form-control" name="name" id="name" required="required" value="myName"> 
       </div> 
      </div> 

      <div class="clearfix igr col-md-12"> 
       <div class="col-md-2"> 
        <label for="email">My Label 3</label> 
       </div> 
       <div class="col-md-3"> 
        <input type="email" class="form-control" name="email" id="email" required="required"> 
       </div> 
      </div> 

      <div class="clearfix igr col-md-12"> 
       <div class="col-md-12"> 
        <label for="message">My Label 4</label> 
       </div> 
       <div class="col-md-3"> 
        <textarea class="form-control" name="message" id="message" required="required"></textarea> 
       </div> 
      </div> 
      <div class="clearfix igr col-md-12"> 
       <div class="col-md-2"> 
        <button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button> 
       </div> 
      </div> 
     </form> 
    </div> 

и использовать стили, как:

label,textarea{ 
     margin:5px 0; 
    } 
    .igr{ 
     margin:15px 0; 
    } 

Answer 4

У меня была такая же проблема, вот мое решение:

<form method="post" class="col-md-12 form-inline form-horizontal" role="form"> 
     <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label> 
     <div class="input-group col-sm-7"> 
      <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/> 
      <span class="input-group-btn"> 
       <button class="btn btn-primary" type="submit">Submit</button> 
      </span> 
     </div> 
    </form> 

здесь Demo

Answer 5

Добавление класса control-label на ваши этикетки должно сделать трюк для вас.