ラベルを配置して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>

はまた、あなたは、私が投稿任意のCSSが表示されない forms-horizontal in bootstrap

Answer 2

あなたが探している属性はですfloatです。 CSSに追加：

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