php - 表格对齐 - 字段相距太远

Question

我是 bootstrap 的新手，从未使用过它(我知道这很难过)我的表单输入之间的空间太大了检查 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

我不会将表单字段(标签和字段)放在单独的列中，因为您固有地获得了列间距。尝试使用 Bootstrap 类 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