テキストボックスの横にラベルを配置する方法

Question

このプロジェクトを支援してください。テキストボックスの横にあるユーザー名とすべてのラベルを整列させたい。具体的には、テキストボックスの左側にあります。あなたは、おそらくのために、フォームの水平クラスを使用したい

<div> 
 
    <label>Username:</label> 
 
    <input type="text" class="form-control" placeholder="Username" tabindex="1"><br> 
 
    <input type="text" class="form-control" placeholder="Password" tabindex="2" float="right"><br> 
 
    <input type="text" class="form-control" placeholder="Company Name" tabindex="3" float="right"><br> 
 
    <input type="text" class="form-control" placeholder="Product Type" tabindex="4" float="right"><br> 
 
</div>

Answer 1

：私はこれが私のコードであるgetbootstrap.com

から次ブートストラップを使用しています形。また、あなたの入力に名前属性がないことに気付きました。あなたが必要と思う名前属性です。ドキュメント：http://getbootstrap.com/css/#forms

<form class="form-horizontal"> 
<div class="form-group"> 
    <label for="username" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" name="username" placeholder="Username" tabindex="1" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="password" class="col-sm-2 control-label">Password</label> 
    <div class="col-sm-10"> 
    <input type="text" class="form-control" name="password" placeholder="Password" tabindex="2" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="company_name" class="col-sm-2 control-label">Company Name</label> 
    <div class="col-sm-10"> 
    <input type="text" class="form-control" name="company_name" placeholder="Company Name" tabindex="3" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="product_type" class="col-sm-2 control-label">Product Type</label> 
    <div class="col-sm-10"> 
    <input type="text" class="form-control" name="product_type" placeholder="Product Type" tabindex="4" /> 
    </div> 
</div> 
</form>