当警报文本很长时，Ngx-bootstrap 警报破坏了 css

问题描述

我遇到了 Bootstrap 警报的问题，我尝试了许多解决方案，但都没有成功。 当文本很短时，一切正常。

当文本很长时，它破坏了 css。

如何使文本自动返回到新行，使警报 div 保持在 col-6 中？ 你有什么主意吗 ？

html 文件为：

<div class="login_body">
    <div class="row">
        <div class="col-6 login_mbl_hide">
            <img src="assets/media/image/auth-image/login-img.png" width="100%">
        </div>
        <div class="col-6">
            <div class="login_form pt_60">
               <div class="form_image mb-10 text-center">
                   <img class="w-80" src="assets/media/image/auth-image/login-logo.png">
               </div>
                <form #loginForm="ngForm" class="form_padding" autocomplete="off">
                    <div class="form-group position-relative">
                        <input type="text" class="form-control" required ngModel #username="ngModel" name="username" [(ngModel)]="usernameModel" placeholder="Username">
                        <span class="input_image">
                            <img src="assets/media/image/auth-image/login-phone.png">
                        </span>
                        <div *ngIf="!username.valid && loginForm.submitted" class="invalid-tooltip">Phone number is required!</div>
                    </div>
                    <div class="form-group position-relative">
                        <input [type]="fieldType ? 'text' : 'password'" class="form-control" required ngModel #password="ngModel" name="password"
                               [(ngModel)]="passwordModel" placeholder="Mot de passe">
                        <span class="input_image">
                            <img src="assets/media/image/auth-image/login-pasword.png">
                        </span>
                        <div *ngIf="!password.valid && loginForm.submitted" class="invalid-tooltip">Password is required!</div>
                        <span class="right">
                            <i class="fas" [ngClass]="{
                                'fa-eye-slash': !fieldType,'fa-eye': fieldType
                            }" (click)="toggleFieldType()" ></i>
                        </span>
                    </div>
                    <div class="form-group form-check d-flex align-items-center justify-content-between pl-0">
                        <label class="form-check-label d-flex align-items-center">
                            <input class="form-check-input checkBox" type="checkBox" name="remember">
                            {{ 'login.remember-me' | translate }}
                        </label>
                        <label class="form-check-label float-right password">
                            {{ 'login.forgot-password' | translate }}
                        </label>

                    </div>
                    <div>
                        <alert *ngIf="authentFailed" type="danger">
                            <strong>{{ 'login.authent-Failed' | translate }}</strong> <br/>
                            <p>{{ authentMessage }} Please try again.</p>
                        </alert>
                    </div>

                    <div class="form_btn">

                        <app-state-button [btnClass]="'btn'" [currentState]="buttonState"
                                          [isdisabled]="buttondisabled" (click)="onSubmit()">
                            {{ 'login.connection' | translate }}
                        </app-state-button>
                        <p (click)="openRegistrationModal()">{{ 'login.user-has-no-account' | translate }}</p>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

当我将警报的 div 位置设置为绝对时，会产生奇怪的结果，而不是将警报置于按钮 div 上方

<div style="position: absolute">
   <alert *ngIf="authentFailed" type="danger">
       <strong>{{ 'login.authent-Failed' | translate }}</strong> <br/>
       <p>{{ authentMessage }} Please try again.</p>
   </alert>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）