Bootstrap 表格内联文本危险未对齐

Question

我有一个简单的表单，通过 jqBootstrapValidation 进行错误处理。我将其设置为当浏览器足够宽时它是水平的。这是它的样子：http://i.imgur.com/K0JKzb8.png

但是，当我输入错误的电子邮件时，表格不再对齐。 http://i.imgur.com/4Fr2UTq.png

这是我正在使用的代码。我只是无法让它工作。

<form class="form-inline">
            <div class="form-group form-group-lg">
                    <div class="col-lg-6 text-center">
                        <label class="sr-only" for="name">Full Name</label>
                        <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name." >
                        <p class="help-block text-danger"></p>
                     </div>
             </div>

            <div class="form-group form-group-lg">
                    <div class="col-lg-6 text-center">
                        <label class="sr-only" for="name">Your email</label>
                        <input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
                        <p class="help-block text-danger"></p>
                     </div>
             </div>

            <div class="col-lg-12 text-center">
                    <div id="success"></div>
                    <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
            </div>
        </form>

有什么建议吗？非常感谢！

Answer 1

问题是错误消息出现在同一列中并将文本框向上推。我相信您要么必须将其添加到内容下方的另一列或另一行。

我不知道这是否对您有帮助，但是当我进行 bootstrap 验证时，我将工具提示属性和错误 class 添加到 div.

<div class="form-group has-error">
    <input id="txtEmail" type="text" class="form-control" data-toggle="tooltip" data-placement="right" title="Email is not valid.">
</div>

这会将文本框突出显示为红色，悬停时会显示错误消息，因此可以节省 space。

Answer 2

您 HTML 的设置方式不正确。您需要让 <div class="col-lg-6"> 结尾和开头彼此相邻。你现在设置它的方式是 form-group 在外面，table-cells 在里面。此外，您还应该拥有 <div class="row">，以便 table 知道何时添加了新行。

<form class="form-inline">
    <div class="row">
        <div class="col-lg-6 text-center">
            <div class="form-group form-group-lg">
                <label class="sr-only" for="name">Full Name</label>
                <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-lg-6 text-center">
            <div class="form-group form-group-lg">
                <label class="sr-only" for="name">Your email</label>
                <input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
                <p class="help-block text-danger"></p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
            <div id="success"></div>
            <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
        </div>
    </div>
</form>

试试这个设置，看看你的代码对齐是否有问题。

Answer 3

随着我得到的各种答案。我设法让它工作。这是最终代码。

<form>
    <div class="row">
    <div class="col-sm-6 text-center">
        <div class="form-group form-group-lg">
            <label class="sr-only" for="name">Full Name</label>
            <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
            <div class="help-block text-danger"></div>
         </div>
     </div>

    <div class="col-sm-6 text-center">
        <div class="form-group form-group-lg">
            <label class="sr-only" for="name">Your email</label>
            <input type="email" class="form-control" type="text" id="formGroupInputLarge"  placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="Email is not valid">
            <div class="help-block text-danger"></div>
         </div>
     </div>
    </div>

    <div class="row">
    <div class="col-sm-12 text-center">
            <input type="hidden" name="location" value="toronto">
            <div id="success"></div>
            <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
    </div>
</div></form>

如果您发现我的回答有问题，请随时发表评论！

Bootstrap 表格内联文本危险未对齐

Bootstrap text-danger with form-inline not aligned

css

twitter-bootstrap-3

jqbootstrapvalidation