Question

我使用bootstrtap 3.3.7，我有两个元素输入文本框和下拉菜单。

这是html：

<!-- input -->
 <div class="container">
 <div class="row">      
    <div class="form-control col-xs-6" style="background-color:red">
        <select name="UNITS" class="btn btn-default dropdown-toggle">
        <option value="me">me</option>
        <option value="fe">fe</option>
        <option value="ki">ki</option>
        <option value="mi">mi</option>
        </select>
    </div>  

    <div class="form-group col-xs-6" style="background-color:green">
        <!-- <i class="fa fa-text-height"></i> -->
        <input type="edit" name="DISTANCE" id="distance" class="form-control input-group-lg" onkeyup="ValidateInput('distance')" placeholder='__#BUFFERDISTANCE#__'>    
    </div>

我的问题是如何在同一行中创建两个元素？

这是jsfiddle。

Answer 1

我将<div class="form-control col-xs-6" style="background-color:red">更改为<div class="form-group col-xs-6" style="background-color:red">

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- input -->
 <div class="container">
 <div class="row">      
    <div class="form-group col-xs-6" style="background-color:red">
        <select name="UNITS" class="btn btn-default dropdown-toggle">
        <option value="me">me</option>
        <option value="fe">fe</option>
        <option value="ki">ki</option>
        <option value="mi">mi</option>
        </select>
    </div>  

    <div class="form-group col-xs-6" style="background-color:green">
        <!-- <i class="fa fa-text-height"></i> -->
        <input type="edit" name="DISTANCE" id="distance" class="form-control input-group-lg" onkeyup="ValidateInput('distance')" placeholder='__#BUFFERDISTANCE#__'>    
    </div>

＆＃13;

Answer 2

col-xs-6也不应该是form-control，因为它添加了导致列换行的填充。选择form-control作为选择。

<div class="container">
         <div class="row">      
            <div class="col-xs-6" style="background-color:red">
                <select name="UNITS" class="form-control btn btn-default dropdown-toggle">
                <option value="me">me</option>
                <option value="fe">fe</option>
                <option value="ki">ki</option>
                <option value="mi">mi</option>
                </select>
            </div>  

            <div class="form-group col-xs-6" style="background-color:green">
                <!-- <i class="fa fa-text-height"></i> -->
                <input type="edit" name="DISTANCE" id="distance" class="form-control input-group-lg" onkeyup="ValidateInput('distance')" placeholder='__#BUFFERDISTANCE#__'>    
            </div>
       </div>
    </div>

https://jsfiddle.net/fryp6mdf/

Answer 3

form-control类正在该元素上添加width: 100%，因此您有多个解决方案。

您可以删除form-control
您可以使用col-xs-6类DEMO

form-control

或者您可以设置width: 50% Demo

Answer 4

尝试替换表单控件

<div class="form-control col-xs-6" style="background-color:red">

到表格组

<div class="form-group col-xs-6" style="background-color:red">

在单行中创建两个html元素。

4 个答案: