html - 防止 Angular 中的 div 溢出

Question

我的一个 Angular 页面有问题。下面是我的应用程序的着陆页。

我面临的问题是每当我单击登录按钮而不输入任何用户名/密码时，我的 div 就会溢出，如下图所示:

到目前为止我尝试了什么:

CSS 属性如:

溢出:隐藏
最大宽度
最小宽度
调整大小:无

它们似乎都不起作用。以下是相同的 HTML:

 <div style=" background-color: rgba(227, 221, 233, 0.582);">

 <div class="container-custom">
  <div class="row">
    <div class="col-md-7" >
      <div class="card">
        <div class="card-body" style="margin-bottom:1%">
            <h3> What we do?</h3>
            <hr>  
      <p style="text-align:justify">
        Avaali is a consulting and professional services organization 
        focused<br>
        on supporting upper mid to large enterprises to create and execute 
        their Digital roadmap.<br>
        We are headquartered in Bengaluru, India. We believe that Digital is 
        going to be the biggest<br>
        enabler of revenue to enterprises. We support our customers to 
        maximize value from digital<br>
        and help them translate this value in the form of innovative 
        customer experience,<br>
        highly engaging customers, internal process efficiencies, reduced 
        costs and delivering<br>
        your organization’s stated objective Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad.
      </p>

      <hr>
      <p>
        Already registered?
        Please login to the portal using your email address and password 
        <br>

      </p>

        </div>
      </div>
    </div>
    <div class="col-md-5"  style="position:relative">
      <div class="card">

        <div class="card-body">
          <br>
      <h4>Velocious Rapid - Sign In</h4>

      <br>
      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <div class="form-group" style="margin-top:23px">
          <input type="username" formControlName="username" id="username" 
          placeholder="Email Id" name="username"
            class="form-control" [ngClass]="{ 'is-invalid': submitted && 
            f.username.errors }" />
          <div *ngIf="submitted && f.username.errors" class="invalid- 
           feedback">
            <div *ngIf="f.username.errors.required">Username is 
            required</div>
          </div>
        </div>
        <div class="form-group" style="margin-top: 35px">
          <input type="password" formControlName="password" id="password" 
            placeholder="Password" name="password"
            class="form-control" [ngClass]="{ 'is-invalid': submitted && 
            f.password.errors }" />
          <div *ngIf="submitted && f.password.errors" class="invalid- 
          feedback">
            <div *ngIf="f.password.errors.required">Password is 
           required</div>
          </div>
        </div>
        <button class="btn btn-primary" type="submit" 
        style="float:right;background-color: #0072aa">Login</button>
        <div *ngIf="error" class="alert alert-danger" 
         style="width:70%">Username or Password is invalid</div>
      </form>
      <br>
      <br>
      <hr>

    <p>New User ? <a href="/"> Register Here</a></p>
     <p> <a routerLink="/vendorOnboarding">Vendor Onboarding</a></p>
     <p> <a href="/">Forgot Password?</a></p>


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

请求一些专家的建议。谢谢!

Answer 1

你需要将你的错误消息位置设置为绝对位置，如下所示

.invalid-feedback {
    position: absolute;
}