如何操作输入框的位置？答案

【问题标题】：How to manipulate the position of an input box?如何操作输入框的位置？
【发布时间】：2018-01-09 05:29:39
【问题描述】：

我试图将下拉框和输入框放在同一行。但是，输入框一直浮动到底部。 floating boxs image

<div style="margin-left: 2%; font-size:10";>
     <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
    <div class=".col1">         
    <select class="selectpicker" >
                <option>USA</option>
                <option>CA</option>                     
            </select>

    <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>   
    </div>

    <div class="col-xs-2">
        <input type="value" class="form-control" id="val">
    </div>  

</div>

【问题讨论】：

请更新您的代码

标签： html css django bootstrap-4

【解决方案1】：

只需用这个替换你的代码

<div style="margin-left: 2%; font-size:10";>
 <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
<div class=".col1" style="float: left;">         
<select class="selectpicker" >
            <option>USA</option>
            <option>CA</option>                     
        </select>

<select class="selectpicker">                   
            <option>=</option>
            <option>></option>  
            <option><</option>                          
            <option>>=</option> 
            <option><=</option>                 
        </select>   
</div>

<div class="col-xs-2" style="float:left;">
    <input type="value" class="form-control" id="val">
</div>

【讨论】：

【解决方案2】：

Here the solution
To put the drop down boxes and the input box on the same line

<div style="margin-left: 2%; font-size:10";>
     <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
    <div class=".col1">         
    <select class="selectpicker" >
                <option>USA</option>
                <option>CA</option>                     
            </select>

    <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>   
    

        <input type="value" class="form-control" id="val">
</div>

</div>

【讨论】：

【解决方案3】：

我在select 和input 字段周围添加了一个包装器，并将其显示为弹性框。我还用 col1 类更正了div。你在类名前有一个点。

.wrapper {
  display: flex;
  align-items: center;
}

.form-control {
  margin-left: .2em;
}

<div style="margin-left: 2%; font-size:10" ;>
  <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>
  <div class="wrapper">
    <div class="col1">
      <select class="selectpicker">
                <option>USA</option>
                <option>CA</option>                     
            </select>

      <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>
    </div>

    <div class="col-xs-2">
      <input type="value" class="form-control" id="val">
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

这是因为您正在使用引导程序 col-xs 类，它将输入标签移动到新行。要解决这个问题，只需像这样移动上部 div 中的输入字段：

<div style="margin-left: 2%; font-size:10";>
     <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
    <div class=".col1">         
    <select class="selectpicker" >
                <option>USA</option>
                <option>CA</option>                     
            </select>

    <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>   


        <input type="value" class="form-control" id="val">
</div>

</div>

【讨论】：

【解决方案5】：

你来了

<div class="col-lg-6">
     <div class="col-lg-12">
         <div class="row">
            <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1> 
            <div class="col-lg-6">
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="row">
                        <select class="selectpicker form-control" >
                        <option>USA</option>
                        <option>CA</option>                     
                        </select>
                    </div>
                </div>
            </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="row">
                            <select class="selectpicker form-control">                   
                            <option>=</option>
                            <option>></option>  
                            <option><</option>                          
                            <option>>=</option> 
                            <option><=</option>                 
                            </select> 
                        </div>
                    </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="col-lg-12">
         <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="row">
                        <input type="value" class="form-control" id="val"> 
                        </div>
                    </div>
                </div>
             </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="row">
                         <button type="submit"  name="submit"  class="btn btn-primary btn-md" > submit </button>
                         </div>
                    </div>
                </div>
             </div>
         </div>
     </div>
</div>

【讨论】：

【解决方案6】：

select{width:49.5%;    height: 31px;
    border: 1px solid #ccc;
    border-radius: 3px;}
    input{height:31px !important;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin-left: 2%; font-size:10";>
 <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
<div class="col-xs-8" style="padding-right:0px;">         
<select class="selectpicker" >
            <option>USA</option>
            <option>CA</option>                     
        </select>
<select class="selectpicker">                   
            <option>=</option>
            <option>></option>  
            <option><</option>                          
            <option>>=</option> 
            <option><=</option>                 
        </select>   
</div>
<div class="col-xs-4" style="padding-left:0px;">
    <input type="value" class="form-control" id="val">
</div>

【讨论】：

@David Yang 请检查一下。如果有任何疑问，请告诉我