如何操縱輸入框的位置？

Question

我想把下拉框和輸入框放在同一行上。但是，輸入框保持浮動到底部。 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> 

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

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

Answer 3

取代你的代碼，我周圍添加的包裝select和input字段並將其顯示爲flexbox。我也用類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>

Answer 4

這是因爲你使用的引導COL-XS類，這是輸入標籤移動到新的生產線。爲了解決這個問題，只需將輸入字段在你的上格是這樣的：

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

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

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