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

您所描述的是来自引导程序的内联表单的默认行为。原因是移动设备倾向于以横向模式使用，并且在该屏幕尺寸处的内联形式将非常小。正如其他人提到的那样，您必须提出自己的解决方案来覆盖默认行为。 enter image description here

可以阅读Bootstrap文档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>

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

3 个答案: