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

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

您的文件中包含以下内容＆＃39; lest-sidebar.php＆＃39;第9行

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

width导致您的单选按钮距离太远的问题。

尝试使用以下内容而不是设置标签的宽度：

<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>

表格对齐 - 字段相距太远

3 个答案: