验证器消息和图标位于Angular Mdb中输入元素的中心

时间:2018-05-01 04:45:09

标签: bootstrap-4 material-design

我无法弄清楚为什么我的验证器信息和图标位于错误的位置。你能告诉我我做错了什么吗?请看下面的代码:

<div class="row"></div>
<div class="mask rgba-black-light flex-center">
  <div class="container text-center white-text">
    <div class="card" style="background-color: transparent; ">
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Register</h4>
        <!--Text-->

        <div class="row">
          <div class="col-md-3">.col-md-3</div>
          <div class="col-md-6">

            <div class="col-md-12">

              <div class="card">


                <!--Card content-->
                <div class="card-body">

                  <!-- Subscription form -->
                  <form [formGroup]="subscriptionForm">


                    <div class="md-form">
                      <i class="fa fa-user prefix grey-text"></i>
                      <input type="text" formControlName="subscriptionFormName" id="subscriptionFormName" class="form-control" mdbInputDirective>
                      <label for="subscriptionFormName">Your name</label>
                    </div>

                    <div class="md-form">
                      <i class="fa fa-envelope prefix grey-text"></i>
                      <input type="email" id="subscriptionFormEmail" formControlName="subscriptionFormEmail" class="form-control" mdbInputDirective>
                      <label for="subscriptionFormEmail">Your email</label>
                    </div>

                    <div class="text-center">
                      <button class="btn btn-indigo waves-light" mdbWavesEffect>Send
                        <i class="fa fa-paper-plane-o ml-1"></i>
                      </button>
                    </div>
                  </form>
                  <!-- Subscription form -->



                </div>

              </div>


            </div>






          </div>
          <div class="col-md-3">.col-md-3</div>
        </div>

      </div>
    </div>
    <!--card-->
  </div>
  <!--container-->
</div>

下面是我渲染时的样子。 enter image description here

正如您所看到的,错误消息是错误放置的,还有图标。我们非常感谢您的帮助。

0 个答案:

没有答案