Html 如何将使用BootstrapValidate创建的错误消息居中？_Html_Forms_Twitter Bootstrap_Validation

Html 如何将使用BootstrapValidate创建的错误消息居中？

html forms twitter-bootstrap validation

Html 如何将使用BootstrapValidate创建的错误消息居中？,html,forms,twitter-bootstrap,validation,Html,Forms,Twitter Bootstrap,Validation,第一次使用引导，第一次询问stackoverflow的问题！我用电子邮件、主题和消息的形式创建了这个模型。我还使用引导验证程序获取弹出的错误消息（如“”）。但它们一直出现在窗口的左侧。有人知道如何在输入框下方获取数据吗？或者甚至在输入框上方？例如，如果其中说“电子邮件”，我想说“请输入一个有效的电子邮件”的错误消息弹出的权利旁边。我已经包括了html和css。希望我做得对。谢谢 <!DOCTYPE html> <html> <head> <li

第一次使用引导，第一次询问stackoverflow的问题！我用电子邮件、主题和消息的形式创建了这个模型。我还使用引导验证程序获取弹出的错误消息（如“”）。但它们一直出现在窗口的左侧。有人知道如何在输入框下方获取数据吗？或者甚至在输入框上方？例如，如果其中说“电子邮件”，我想说“请输入一个有效的电子邮件”的错误消息弹出的权利旁边。我已经包括了html和css。希望我做得对。谢谢

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="form-issue.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
</head>

<body>
    <div class="contact">
        <h2>CONTACT</h2>
        <form action="" method="POST">
            <div class="form-group">
                <label class="label" for="email">Email</label>
                <input id="email" class="form-control" type="text" name="email">
            </div>
            <div class="form-group">
                <label class="label" for="subject"> Subject </label>
                <input id="subject" class="form-control" type="text" name="subject">
            </div>
            <div class="form-group">
                <label class="label" for="message">Message</label>
                <textarea id="message" class="form-control" name="message" rows="10"></textarea>
                <input class="button" type="submit" value="Submit">
            </div>
        </form>
    </div>

    <script>
        bootstrapValidate('#email', 'email:Please enter a valid email');
        bootstrapValidate('#subject', 'required:Subject is required');
        bootstrapValidate('#message', 'required:Message is required');
    </script>
</body>

</html>

请参见下面的验证示例！并添加一行样式：。无效反馈{宽度：30%；}

请参见下面的示例进行验证！并添加一行样式：。无效反馈{宽度：30%；}
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
接触
电子邮件
请输入有效的电子邮件。

在元素的类属性中使用引导类“文本中心”

.contact {
    color: white;
    background-color: #c0c0c0;
    padding-top: 2%;
    padding-bottom: 4%;
    width: 100%;
}

.contact h2 {
    text-align: center;
}

.form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px;
}

#email,
#subject,
#message {
    width: 30%;
}

.label {
    width: 30%;
    text-align: left;
}

.button {
    background-color: #000000;
    color: white;
    text-align: center;
    width: fit-content;
    min-height: inherit;
    border-color: #000000;
    border-width: 10px;
    margin-top: 20px;
    margin-bottom: 5px;
}