右ラベルを揃え、それらをブートストラップで同じ行に表示させるために左にテキストをフロート

Question

<form class="form-horizontal" action="addtodatabase.php" class="form-inline" method="post" enctype="multipart/form-data" > 
 
\t <div class="container-fluid"> 
 

 
    
 
\t \t <fieldset> 
 
\t \t <legend><h5>Security Department User Registration</h5></legend> 
 
\t \t 
 
\t \t <div class="row"> 
 
\t \t <div class="col-xs-4 control-group"> 
 
\t \t \t <label class="control-label" for="Firstname">First Name</label> 
 
\t \t \t <div class="controls"> 
 
\t \t \t <input type="text" class="form-control input-sm" name="firstname" placeholder="Text input"><br/> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="col-xs-4 control-group"> 
 
\t \t \t <label class="control-label" for="Secondname">Second Name</label> 
 
\t \t \t <div class="controls"> 
 
\t \t \t <input type="text" class="form-control input-sm" name="secondname" placeholder="Text input"><br/> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="col-xs-4 control-group"> 
 
\t \t \t <label class="control-label"for="location">Dpt./Location</label> 
 
\t \t \t <div class="controls"> 
 
\t \t \t <input type="text" class="form-control input-sm" name="location" placeholder="Text input"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

In my form I get label at the top and next line field .Since I have used row three of them are in the same row but I want label then followed by field .

今私は、フィールドを取得することはできませんよ水平線内First Name,Second Name,Dpt./Location.

表紙の上にラベルを付けます

私はさまざまな長さのラベルを付けました。私はそれを適切に配置したいと思っています。

は、私はラベルとテキストフィールドの両方が水平になりたい私のフォームで

を行うために必要なものを変更label to be at right side and followed by text field 私は他の多くの分野を持っていますが、それらが正しくためラベルの揃え `tを長いです。

I want all the label both long and short to be aligned properly immediately followed by text field.

は私が

Answer 1

を見て次のリンクをチェックして、私はあなたがあなたの質問のためのソリューションを見つけることになると思います。

https://jsfiddle.net/wLxf6cnn/

注：フォーム要素の全てが揃っ左インライン、あり、そしてラベルが並んでいることを確認するために768px幅の広いよりも、ビューポートを大きくしてください。

<form action="addtodatabase.php" method="post" enctype="multipart/form-data"> 
     <div class="container-fluid"> 
     <legend> 
      <h5>Security Department User Registration</h5> 
     </legend> 

     <div class="row form-inline"> 
      <div class="col-xs-4 form-group"> 
      <label class="control-label" for="Firstname">First Name 
       <input type="text" class="form-control input-sm" name="firstname" placeholder="Text input"> 
       <br/> 
      </label> 
      </div> 

      <div class="col-xs-4 form-group"> 
      <label class="control-label" for="Secondname">Second Name 
       <input type="text" class="form-control input-sm" name="secondname" placeholder="Text input"> 
       <br/> 
      </label> 
      </div> 

      <div class="col-xs-4 form-group"> 
      <label class="control-label" for="location">Dpt./Location 
       <input type="text" class="form-control input-sm" name="location" placeholder="Text input"> 
      </label> 
      </div> 
     </div> 

Answer 2

は、あなたがこのような何かをしたいですuはこれは私が何をしたいのかであるテキストフィールドが続いているラベル（nameとDOB）を参照してください同じ行 であることができpicに。

を例

label { 
 
    
 
    clear:left; 
 
    text-align:right; 
 
    padding-right:10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<form action="addtodatabase.php" class="form-inline" method="post" enctype="multipart/form-data" > 
 
\t <div class="container-fluid"> 
 

 
    
 
\t \t <fieldset> 
 
\t \t <legend><h5>Security Department User Registration</h5></legend> 
 
\t \t 
 
\t \t <div class="row"> 
 
\t \t <div class="col-xs-4 form-group"> 
 
\t \t \t <label class="control-label" for="Firstname">First Name 
 
\t \t \t 
 
\t \t \t <input type="text" class="form-control input-sm" name="firstname" placeholder="Text input"><br/></label> 
 
\t \t 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="col-xs-4 form-group"> 
 
\t \t \t <label class="control-label" for="Secondname">Second Name 
 
\t \t \t 
 
\t \t \t <input type="text" class="form-control input-sm" name="secondname" placeholder="Text input"><br/></label> 
 
\t \t \t </div> 
 
\t 
 
\t \t 
 
\t \t <div class="col-xs-4 form-group"> 
 
\t \t \t <label class="control-label"for="location">Dpt./Location 
 
\t \t 
 
\t \t \t <input type="text" class="form-control input-sm" name="location" placeholder="Text input"></label> 
 
\t \t \t </div> 
 
\t \t </div>