Question

不确定为什么会发生这种情况，但是当我在全屏显示页面时，表单内联工作效果很好。但是一旦我开始缩小它，标签就会出现在表格的顶部。

使用bootstrap 3

 <row>
     <form class="form-inline">
        <div class="col-xs-4 col-sm-3 col-lg-3 form-group">
            <label>Start:<input type="text" class="form-control" placeholder="{{ start_length }}" id="bar"></label>
        </div>
        <div class="col-xs-4 col-sm-3 col-lg-3 pull-right form-group">
            <label>End: <input type="text" class="form-control" placeholder="{{ end_length }}" id="bar1"></label>
        </div>
    </form>
 </row>

jsfiddle

Answer 1

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/custom/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<row>
                 <form class="form-inline">
                    <div class="form-group">
                        <label>Start:<input type="text" class="form-control inline" placeholder="0" id="bar"></label>
                    </div>
                    <div class="form-group">
                        <label>End: <input type="text" class="form-control inline" placeholder="45" id="bar1"></label>
                    </div>
                </form>
             </row>

Bootstrap Form inline仅适用于全屏而非缩放

1 个答案: