引导警报自动扩展动态宽度父

Posted 2023-03-06

【中文标题】引导警报自动扩展动态宽度父

【英文标题】：Bootstrap alert automatically expanding dynamic width parent

【发布时间】：2017-12-25 14:29:02

【问题描述】：

我尝试了一些解决堆栈溢出问题的方法，例如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;

【问题讨论】：

将错误框的最大宽度属性设置为一定数量的像素

【参考方案1】：

在您的错误框中添加宽度，因此将此 css 行添加到您的样式中。但未经测试导致您的整体风格在这里不起作用

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