css - 升级 Angular Material 打破了 md-input 换行符

Question

当我运行旧的 Material 版本时，我有这个登录表单。 我决定升级以使用新功能。

更新后，表单损坏，因此它们不再显示在不同的行上，而是显示在同一行中，如下所示:

更新前

更新后

这是代码:

<div class="form-container">
            <form class="form-horizontal" action="javascript:;">

                <md-input-container md-no-float>
                    <label>Email</label>
                    <input type="email" placeholder="Enter your email" ng-model="email" required>
                </md-input-container>     

                <md-input-container>
                    <label>Password</label>
                    <input type="password" placeholder="Type your password" ng-model="password" required>
                </md-input-container>
    </form>

</div>

有什么问题吗？

Answer 1

只需在 md-input-container 上使用 class="md-block" - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <div class="form-container">
    <form class="form-horizontal" action="javascript:;">

      <md-input-container md-no-float class="md-block">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" ng-model="email" required>
      </md-input-container>     

      <md-input-container class="md-block">
        <label>Password</label>
        <input type="password" placeholder="Type your password" ng-model="password" required>
      </md-input-container>
    </form>
  </div>
</div>

编辑:上述方法是正确的 Angular Material 方法，但如果您想减少两个输入之间的差距，只需使用一点 CSS - CodePen

标记

<md-input-container class="md-block" id="password">

CSS

#password {
  margin-top: -10px
}