Bootstrap表单组未正确对齐

时间:2014-01-23 17:36:46

标签: html css twitter-bootstrap

以下是我所指的代码: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>

                                              

2 个答案:

答案 0 :(得分:2)

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

您需要在右侧块中添加“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>

答案 1 :(得分:0)

我相信“form-group”类可以在FORM标签中使用。这是你想要实现的目标吗?

<div class="container">
<div class="row">
    <div class="col-md-12">
        <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 role="form">
                <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>
            </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input class="btn btn-lg btn-success btn-block" type="submit" value="Save">
            </div>
        </div>
    </div>
</div>
</div>

http://jsfiddle.net/stevenng/Rn9ne/4/