bootstrap內嵌形式堆棧ontop彼此

我有一個問題，當它顯示全屏時它看起來它是如何設想的。但是，當我開始縮小規模後，第一個表單組將表單向外移動，並將第二個表單組合併到一個新行。bootstrap內嵌形式堆棧ontop彼此

我想在同一條線上都形成羣體，甚至當我縮小到移動視圖

  <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

來源

2015-06-12 nadermx

你能創建一個這樣的問題的小提琴嗎？ – Mivaweb

這就是Bootstrap應該如何工作。 –

我會做小提琴。 @BidhanA我同意，但正如我所說，第一種形式組一旦擴大了形式，一旦你縮放，但不是第二個。再加上表格應該有足夠的空間讓他們兩個都適合一條線。 – nadermx

這也許使用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>

來源

2015-06-12 13:24:05 doru

你所描述的是從引導內嵌形式的默認行爲。原因在於移動設備傾向於在橫向模式下使用，並且在該屏幕尺寸下，嵌入式表格會非常小。正如其他人所提到的，您將不得不提出自己的解決方案來覆蓋默認行爲。 enter image description here

的引導文件可以被讀取here

來源

2015-06-12 14:34:36 Trucktech

這是你在找什麼？我剛剛在一個小屏幕上指出，每個輸入必須佔用一半的空間。

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

來源

2015-06-12 14:47:27

bootstrap內嵌形式堆棧ontop彼此

回答

相關問題