Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

与Bootstrap 3集成时，验证消息显示位置不正确 #28

Closed
shelltea opened this issue Aug 14, 2013 · 5 comments
Closed

与Bootstrap 3集成时，验证消息显示位置不正确 #28

shelltea opened this issue Aug 14, 2013 · 5 comments
Assignees
@niceue
Labels
question
Milestone
0.4.0

Comments

@shelltea
Copy link

在与Bootstrap 3.0.0 RC2集成时，验证信息显示位置如下图所示：

image

javascript:

$(function() {
    $('#registerForm').validator({
        theme : 'simple_right',
        fields : {
            'email' : 'required;email;remote[check/email]',
            'username' : 'required;username;remote[check/username]',
            'password' : 'required;password'
        }
    });
});

html:

<div class="container">
    <form id="registerForm" class="form-horizontal" action="" method="POST">
        <fieldset>
            <legend>注册</legend>
            <div class="form-group">
                <label for="inputEmail" class="col-lg-2 control-label">电子邮箱</label>
                <div class="col-lg-4">
                    <input name="email" type="text" class="form-control" id="inputEmail" placeholder="电子邮箱">
                </div>
            </div>
            <div class="form-group">
                <label for="inputUsername" class="col-lg-2 control-label">用户名</label>
                <div class="col-lg-4">
                    <input name="username" type="text" class="form-control" id="inputUsername" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-lg-2 control-label">密码</label>
                <div class="col-lg-4">
                    <input name="password" type="password" class="form-control" id="inputPassword" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-offset-2 col-lg-10">
                    <button type="submit" class="btn btn-primary">注册</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
@niceue
Copy link
Owner

niceue commented Aug 15, 2013

@shelltea 原因是因为Bootstrap 将input设置了display:block;，就没法在右侧显示消息了 。
但据我的考察，设置inline-block就可以了，CSS代码如下：

.form-control {
  display: inline-block; *display: inline; *zoom: 1;
}

修正后的演示： http://jsbin.com/ofetak/11

@shelltea
Copy link
Author

@niceue 使用你的方法，确实解决了此问题，但是这样每次升级Bootstrap都需要修改这行代码，并且有可能对其他地方产生影响。能否提供一个更好的方式兼容Bootstrap？

@niceue
Copy link
Owner

niceue commented Aug 16, 2013

@shelltea 还一种办法是在jquery.validator.css中添加补丁，代码如下：

.n-validator input, .n-validator select, .n-validator textarea {
    display: inline-block; *display: inline; *zoom: 1;
}

不过，我要再考察一下，如果这个样式没问题（不会对Bootstrap产生影响），将在下个版本中添加进去。

@niceue
Copy link
Owner

niceue commented Aug 16, 2013

@shelltea 顺便问下：Bootstrap 3不是不支持IE6/7吗？你们的项目蛮先进的嘛

@shelltea
Copy link
Author

@niceue 在实际的项目中用过一次Bootstrap 2，因为项目是面向特定的用户，所以我们以安全性、性能等因素说服了他们使用Chrome。

@niceue niceue closed this as completed Sep 13, 2013
@ghost ghost assigned niceue Sep 13, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@niceue niceue

Labels
question
Projects
None yet
Milestone
0.4.0
Development

No branches or pull requests
2 participants
@shelltea @niceue