Bootstrap内联表单堆栈彼此重叠

Question

I am having a problem, when this is shown full screen it looks how it is suppose too. But as I start scaling down in size once I get to mobile the first form group exands the form all the way across and bumps down the second form group to a new line.

I want both form groups in the same line even when I scale down to mobile 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

Maybe this use of media queries will give you what you want - or, at least, will point you at some possible direction:

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

What you are describing is the default behavior of an inline form from bootstrap. The reason is that mobile devices tend to be used in landscape mode and an inline form would be very small at that screen size. As others have mentioned you will have to come up with your own solution to override the default behavior.

The Bootstrap documentation can be read here

Answer 3

Is this what you are looking for? I've just specified that on a small screen, each input had to take half the space.

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