2015-12-14 3 views
0

У меня простая форма и вы хотите, чтобы она была горизонтальной на средних больших устройствах и вертикальной на небольших устройствах с twitter-bootstrap-3.Форма бутстрапа Горизонтальная вертикальная реакция

У меня есть работающий отзывчивый, но он не переключается на вертикальный стиль на небольших устройствах. Разве это невозможно?

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-offset-1 col-md-10"> 
      <form method="POST" action="...url.." class="form-horizontal"> 
       <div class="form-group"> 
        <label for="telefon" class="control-label col-xs-3">Telefon</label> 
        <div class="col-xs-8"> 
         <input type="text" name="telefon" class="form-control"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="email" class="control-label col-xs-3">Email</label> 
        <div class="col-xs-8"> 
         <input type="email" name="email" class="form-control"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-3 col-sm-6"> 
         <button type="submit" class="btn btn-primary">Save</button> 
        </div> 
       </div>      
      </form> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/quyw5fnL/

EDIT: Я хочу, чтобы выглядеть на больших экранах: Label1: Inputbox1 Label2: Inputbox2

А на небольших экранах, как это: Label1: Inputbox1 Label2: Inputbox2

ответ

0
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-offset-1 col-md-10"> 
      <form method="POST" action="...url.." class="form-inline"> 
       <div class="form-group"> 
       <label for="telefon" class="">Telefon</label> 
       <input type="text" name="telefon" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <label for="email" class="">Email</label> 
         <input type="email" name="email" class="form-control"> 
       </div> 
       <div class="form-group"> 

         <button type="submit" class="btn btn-primary">Save</button> 

       </div>      
      </form> 
     </div> 
    </div> 
</div> 
+0

Спасибо за ваш ответ, но это не то, что я ищу. Я просто хочу, чтобы метки переключались на текстовые поля, когда размер экрана становится небольшим. – d1c1pl3

+0

can u plz check 'http://jsfiddle.net/gunvantparmar/quyw5fnL/1/' – GunvantParmar

+0

То точно, что я искал, спасибо очень. Если вы вставьте его в качестве ответа, я могу отметить его как правильно. – d1c1pl3

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