html - Bootstrap 内联表单堆叠在彼此之上

Question

我有一个问题，当它全屏显示时，它看起来也是如此。但是当我开始缩小尺寸时，一旦我开始移动，第一个表单组就会一直扩展表单，并将第二个表单组向下移动到一个新行。

即使缩小到移动 View ，我也希望两个表单组在同一行

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