Bootstrap警告自动扩展动态宽度父元素

Question

我尝试了一些在stackoverflow上找到的解决方案，例如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;
}

- Tom N

---

将您的错误框的最大宽度属性设置为特定像素数量。 - Elie Nassif

Answer 1

在你的错误框中添加宽度，所以在你的样式中添加这行CSS代码。但是由于你的整体样式在这里无效，所以没有进行测试。

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

- Shafiqul Islam