Bootstrap inline form stack ontop друг от друга

Question

У меня проблема, когда на экране отображается полный экран, он выглядит так, как предполагается. Но по мере того, как я начинаю уменьшаться по размеру, как только я доберусь до мобильника, первая группа форм полностью перевернет форму и ударит вторую группу форм в новую строку.

Я хочу, чтобы оба образуют группы, в одной и той же линии, даже когда я масштабируемые вниз на мобильный зрения

  <div class = "container col-xs-12 col-sm-6 col-lg-5 center-block"> 
      <form class="form-inline"> 

      <div class="form-group"> 

       <label>Start:</label> 
       <input type="text" class="form-control" placeholder="{{ start_length }}" id="bar"> 

      </div> 
      <div class="form-group pull-right"> 

       <label>End: </label> 
       <input type="text" class="form-control" placeholder="{{ end_length }}" id="bar1"> 

      </div> 

      </form> 
     </div> 

jsfiddle

Answer 1

Может быть, это использование media queries даст вам то, что вы хотите - или, по крайней мере, укажет вам в каком-либо возможном направлении:

См. fiddle here.

CSS

.center-block {float: none !important} 
.inline{ 
display:inline-block!important; 
width:auto!important; 
} 


@media only screen and (min-width : 320px) { 
    input[type="text"] { 
    width: 110px; 
    background-color: yellow; 
}  
} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
input[type="text"] { 
width:110px; 
background-color: red; 
} 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 
input[type="text"] { 
width: 110px; 
background-color: blue; 
} 
}  
/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 
input[type="text"] { 
width: 110px; 
background-color: grey; 
} 
} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 
input[type="text"] { 
width: 120px; 
background-color: green; 
} 
} 

HTML

<div class = "container col-xs-12 col-sm-8 col-lg-6 center-block"> 
     <form class="form-inline inline"> 

     <div class="form-group pull-left"> 

      <label>Start:</label> 
      <input type="text" class="form-control" placeholder="{{ start_length }}" id="bar"> 

     </div> 
     <div class="form-group pull-right"> 

      <label>End: </label> 
      <input type="text" class="form-control" placeholder="{{ end_length }}" id="bar1"> 

     </div> 

     </form> 
    </div> 

Answer 2

То, что вы описываете поведение по умолчанию инлайн формы из начальной загрузки. Причина в том, что мобильные устройства, как правило, используются в ландшафтном режиме, а встроенная форма будет очень мала при этом размере экрана. Как уже упоминалось, вам придется придумать собственное решение, чтобы переопределить поведение по умолчанию.

бутстрапом документация может быть прочитан here

Answer 3

это то, что вы ищете? Я только что указал, что на маленьком экране каждый вход должен был занимать половину пространства.

<div class = "container col-xs-12 col-sm-6 col-lg-5 center-block"> 
     <form class="form-inline"> 

     <div class="form-group col-xs-6"> 

      <label>Start:</label> 
      <input type="text" class="form-control" placeholder="{{ start_length }}" id="bar"> 

     </div> 
     <div class="form-group pull-right col-xs-6"> 

      <label>End: </label> 
      <input type="text" class="form-control" placeholder="{{ end_length }}" id="bar1"> 

     </div> 

     </form> 
    </div>