如何安排標籤並在html中輸入

Question

我試圖水平地安排輸入和標籤。

我想：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
      <div class="row"> 
 
       <div class="span2"> 
 
        <h2>Label1:</h2> 
 
       </div> 
 
       <div class="span2"> 
 
        <input id="Filter_1" /> 
 
       </div> 
 
       <div class="span1"> 
 
        <h2>Label2:</h2> 
 
       </div> 
 
       <div class="span1"> 
 
        <input id="Filter_2" /> 
 
       </div> 
 
       <div class="span2"> 
 
        <h2>Label3:</h2> 
 
       </div> 
 
       <div class="span2"> 
 
        <input id="Filter_3" /> 
 
       </div> 
 
       <div class="span1"> 
 
        <input id="Button1" type="button" class="btn btn-large" value="Button 1" /> 
 
       </div> 
 
      </div>

但結果在屏幕的左側是可怕的這一切而右側則完全空白：

Answer 1

如果您使用引導，您可以使用此佈局。

運行代碼並以整頁模式打開它。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-xs-6 col-md-4 col-lg-3"> 
 
     <label>Label1:</label> 
 
     <input id="Filter_1" /> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
     <label>Label2:</label> 
 
     <input id="Filter_2" /> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
     <label>Label3:</label> 
 
     <input id="Filter_3" /> 
 
    </div> 
 
    <div class="form-btn"> 
 
     <input id="Button1" type="button" class="btn btn-primary btn-large" value="Button 1" /> 
 
    </div> 
 
    </div> 
 
</div>

您也可以在forms-horizontal in bootstrap

Answer 2

我認爲你正在搜索的屬性是float。添加到您的CSS：

.span1, .span2 { 
    float: left; 
    [...] 
}