Bootstrap警报自动扩展动态宽度父级

Question

我已经尝试了一些我在堆栈溢出时发现的解决方案，例如display:inline-block和position:absolute; top:0; left:0;但是它们似乎都不适合我的问题。

我正在尝试使用JQuery根据模糊事件中表单的用户输入显示和隐藏错误消息，但是，当显示错误时，警报会自动扩展父div，当我更喜欢宽度保持不变并将父级向下扩展

register.php（已修剪）

<div class="form-group" style="margin-bottom:0px">
<!-- Password -->
<div class="input-group">
    <div class="input-group-addon">
        <i class="fa fa-unlock" style="font-size:110%" aria-hidden="true"></i>
    </div>
    <label for="password" class="sr-only">Password:</label>
    <input class="form-control" type="password" name="password" id="password" placeholder="Password" required>
</div>

<!-- Errors-->
<div class="alert alert-danger regError" id="nameInvalid" style="display:none;">
    Invalid Name: Must contain both your first name and last
    name, and consist of only alphabetic characters, dashes and
    apostrophes.
</div>
<div class="alert alert-danger" id="numberInvalid" style="display:none">
    Invalid Student Number: Student Number must seven digits.
</div>

<!-- Register Button -->
<div style="margin-top:5%">
    <button type="submit" class="btn btn-success pull-right">Register</button>
</div>
</div>

style.scss

html{
    min-height: 100%;
    position: relative;
}

body{
    height: 100%;
}

//Login & Register
body.login{
    background-color: $colour1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#login-box{
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    background-color: $colour4;
    padding-bottom:2%;
    padding-left:2%;
    padding-right:2%;
    border-radius: 5px;
    position: relative;
    max-width: 450px;
    display:table;

}

.input-group-addon{
    width: 18%;
}

.input-group{
    width:100%;
}

.regError{
    margin-top: 5%;
    width: 100%;
    display:inline-block;
}

Answer 1

在错误框中添加宽度，然后将此css行添加到您的样式中。但未经测试导致您的总体风格无法在此工作

#nameInvalid,#numberInvalid {
        max-width: 400px;
        /*add your extra style if needed */
}