フォームアライメント - フィールドが離れすぎています

Question

私はブートストラップには新しく、それを使ったことはありません（私は悲しいことを知っています）私のフォーム入力のスペースは大きすぎますかチェックhttps://tadzik9634.000webhostapp.com/lest-sidebar.php 私はそれらを整列させる解決策を見つけることができませんでしたスペースはここで私のhtmlコードは小さくなります。また、私のラジオボタンのスペースは大規模です。

<div class="container-form"> 
<form class="form-horizontal" action="" method="post"> 
<p><span class="error">* required field.</span></p> 
<div class="form-group"> 
<label for="first_name" class="col-sm-4 control-label">Name:</label> 
<div class="col-sm-4"> 
<input type="text" class="form-control input-sm" name="first_name"> 
<span class="error">* <?php echo $nameErr;?></span> 
</div> 
</div> 
<div class="form-group"> 
<label for="last_name" class="col-sm-4 control-label">SurnameName: </label> 
<div class="col-sm-4"> 
<input type="text" class="form-control input-sm" name="last_name"> 
<span class="error">* <?php echo $lastNameErr;?></span> 
</div> 
</div> 
<div class="form-group"> 
<label for="email" class="col-sm-4 control-label">Email: </label> 
<div class="col-sm-4"> 
<input type="text" class="form-control input-sm" name="email"> 
<span class="help-block">Please Enter Your Email</span> 
<span class="error">* <?php echo $emailErr;?></span> 
</div> 
</div> 
<label class="radio-inline"> 
<input type="radio" name="ironing" id="optionsRadios1" <?php if (isset($ironing) && $ironing=="Yes") echo "checked";?> value="Yes">Yes 
</label> 
<label class="radio-inline"> 
<input type="radio" name="ironing" id="optionsRadios2" 
<?php if (isset($ironing)&& $ironing=="No") echo "checked";?> value="No">No 
</label> 
<span class="help-block">Would Like Ironing?</span> 
<span class="error">* <?php echo $ironingErr;?></span> 
<div class="form-group"> 
<label for="Romms" class="col-sm-4 control-label" >Number Of Rooms: </label> 
<div class="col-sm-4">         
<input type="number" class="form-control input-sm" max="10" name="Rooms"> 
<span class="error">* <?php echo $RoomErr;?></span> 
</div> 
</div> 
<div class="form-group"> 
<label for="Hours" class="col-sm-4 control-label" > Number hours: </label> 
<div class="col-sm-4"> 
<input type="number" class="form-control input-sm" min="3" name="Hours"> 
<span class="error">* <?php echo $RoomErr;?></span> 
</div> 
</div> 
<div class="form-group">  
<label for="description">Description of the House: </label> 
<div class="col-sm-4"> 
    <textarea name="description" rows="3" class="form-control input-sm" cols="10"></textarea> 
<span class="error">* <?php echo $descriptionErr;?></span> 
</div> 
</div> 
<input class="btn btn-default"type="submit" name="submit" value="Submit"> 
</form> 
</div> 

Answer 1

フォームフィールド（ラベルとフィールド）は、本来、列間隔を取得するので、別の列です。ブートストラップクラスform-inlineを使用して、エレメントを互いの隣に配置してみてください。

<div class="form-inline"> 
    <div class="form-group"> 
     <label for="first_name">Name:</label> 
     <input type="text" class="form-control input-sm" name="first_name"> 
     <span class="error">* </span> 
    </div> 
</div> 

ドキュメント：http://getbootstrap.com/css/#forms-inline

Answer 2

あなたのHTMLの構造が正しくありません。ブートストラップカラムはrowクラスに、form-groupはカラムの中に入れてください。このような何か -

<div class="row> 
    <div class="col-md-12"> 
     <div class="form-group> 
      <label></label> 
      <input type=""> 
      .... 
     </div> 
    </div 
</div> 

Answer 3

あなたのラジオボタンは、これまで離れて空間で、問題の原因となっている9

label{ 
    display: inline-block; 
    width: 210px; 
    text-align: right; 
} 

width「LEST-sidebar.php」あなたのファイルの行に次のよう持っています。

次の代わりに、あなたのラベルの幅を設定してみてください：

<div class="form-inline"> 
    <div class="form-group"> 

     <div class="col-md-4"> 
      <label for="first_name">Name:</label> 
     </div> 

     <div class="col-md-8"> 
      <input type="text" class="form-control input-sm" name="first_name"> 
      <span class="error">* </span> 
     </div> 

    </div> 
</div>