html - Bootstrap 表单组未正确对齐

Question

这也是我所指的代码:http://jsfiddle.net/Rn9ne/1/

如果您展开输出窗口使它们不堆叠，您可以看到右侧的列有点乱。左侧和右侧具有相同的代码和相同的列跨度。

<div class="col-md-9">
<div class="col-md-9 col-md-offset-3">
        <div class="page-header">
            <h3>Your Profile</h3>
        </div>
        <div class="row">
            <div class="col-md-6">
                <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal">               <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Name</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">Jon</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Email</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">email@email.com</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Phone</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">01258989</p>
                    </div>
                </div>
                <div class="form-group">
                    <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
                    <div class="col-sm-8 col-sm-pad">
                        <input class="form-control input-block" name="gender" type="text">                      </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Player Type</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">Jon</p>
                    </div>
                </div>
            </form></div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Name</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">Jon</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Email</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">email@email.com</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Phone</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">01258989</p>
                    </div>
                </div>
                <div class="form-group">
                    <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
                    <div class="col-sm-8 col-sm-pad">
                        <input class="form-control input-sm" name="gender" type="text">                     </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Player Type</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">Jon</p>
                    </div>
                </div>
            </div>

Answer 1

使用这个 HTML - http://jsfiddle.net/Rn9ne/3/

您需要在右侧 block 中添加“form-horizo​​ntal”类。

<div class="col-md-9">
<div class="col-md-9 col-md-offset-3">
    <div class="page-header">
        <h3>Your Profile</h3>
    </div>
    <div class="row">
        <div class="col-md-6">
            <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal">               <div class="form-group">
                <label class="col-sm-4 control-label col-sm-pad">Name</label>
                <div class="col-sm-8 col-sm-pad">
                    <p class="form-control-static">Jon</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label col-sm-pad">Email</label>
                <div class="col-sm-8 col-sm-pad">
                    <p class="form-control-static">email@email.com</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label col-sm-pad">Phone</label>
                <div class="col-sm-8 col-sm-pad">
                    <p class="form-control-static">01258989</p>
                </div>
            </div>
            <div class="form-group">
                <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
                <div class="col-sm-8 col-sm-pad">
                    <input class="form-control input-block" name="gender" type="text">                      </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Player Type</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">Jon</p>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-6 form-horizontal">
            <div class="form-group">
                <label class="col-sm-4 control-label col-sm-pad">Name</label>
                <div class="col-sm-8 col-sm-pad">
                    <p class="form-control-static">Jon</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label col-sm-pad">Email</label>
                <div class="col-sm-8 col-sm-pad">
                    <p class="form-control-static">email@email.com</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label col-sm-pad">Phone</label>
                <div class="col-sm-8 col-sm-pad">
                    <p class="form-control-static">01258989</p>
                </div>
            </div>
            <div class="form-group">
                <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
                <div class="col-sm-8 col-sm-pad">
                    <input class="form-control input-sm" name="gender" type="text">                     </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label col-sm-pad">Player Type</label>
                    <div class="col-sm-8 col-sm-pad">
                        <p class="form-control-static">Jon</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-md-offset-9"><input class="btn btn-lg btn-success btn-block" type="submit" value="Save"></div>
    </div>
</div>