在單行中創建兩個html元素。

我使用bootstrtap 3.3.7，我有兩個元素輸入文本框和下拉菜單。在單行中創建兩個html元素。

這裏是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

來源

2017-03-22 Michael

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

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

來源

2017-03-22 13:20:03 Monicka

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

來源

2017-03-22 13:22:48 ZimSystem

感謝post.my屏幕尺寸爲250px.when我用你atitude我得到的水平scroll.Any idae如何防止水平滾動？ – Michael

form-control類是元素讓你有多種解決方案上加入width: 100%。

您可以刪除form-control
您可以創建內部col-xs-6多了一個元素與form-control類DEMO
或者你也可以設置width: 50%Demo

來源

2017-03-22 13:26:56

嘗試更換形式控制

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

到表單組

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

來源

2017-03-22 13:27:55

在單行中創建兩個html元素。

回答

相關問題