Html 当字段有效时，角度材质形状收缩

我用有角的材料做接触形状。但是，当前两个元素中的任意一个或两个都有效时，形状的宽度将缩小。因此，当主题有效时，表单缩小，当电子邮件有效时，表单再次缩小。当窗体是行和列时，它会收缩

我发现解决这个问题的一种方法是在表单元素上添加flex，但这会导致表单填充整个页面，这是不可取的。我还将表单和span元素在其上下进行了弯曲，但这只会使表单比这两个字段有效时更容易挤压

<div layout="column" layout-gt-md="row" layout-align="start center" layout-align-gt-md="center start">
<form name="contactForm">
    <div layout="row" layout-align="space-between center">
        <div>
            <h3>Contact Form</h3>
            <span>Fill out the contact form to send me an email.</span>
        </div>
    </div>
    <div layout-gt-md="row">
        <md-input-container class="md-block" flex>
            <label>Subject</label>
            <input minlength="5" md-maxlength="30" required name="subject" ng-model="contact.subject" />
            <div class="hint">Give your message a subject.</div>
            <div ng-messages="contactForm.subject.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength']">The subject has to be between 5 and 30 characters long.</div>
            </div>
        </md-input-container>
        <div flex="5" show-gt-md>
            <!-- Spacer //-->
        </div>
        <md-input-container class="md-block" flex>
            <label>Client Email</label>
            <input required name="email" ng-model="contact.email"
                   minlength="10" md-maxlength="100" ng-pattern="/^.+@.+\..+$/" />
            <div class="hint">What email should I reply to?</div>
            <div ng-messages="contactForm.email.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                    Your email must be between 10 and 100 characters long and be a valid email address.
                </div>
            </div>
        </md-input-container>
    </div>
    <div layout-gt-md="row">
        <md-input-container class="md-block" flex>
            <label>Body</label>
            <textarea name="body" ng-model="contact.body" required minlength="15" md-maxlength="1500" rows="5"></textarea>
            <div class="hint">What would you like to message me about?</div>
            <div ng-messages="contactForm.body.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength']">The body must be between 15 and 1500 characters long.</div>
            </div>
        </md-input-container>
    </div>
    <div layout-gt-md="row">
        <span flex></span>
        <md-button class="md-raised" ng-disabled="contactForm.$invalid"><md-icon class="material-icons">mail_outline</md-icon>Send</md-button>
    </div>
</form>
</div>

编辑

---

添加了

您正在使用的

开始中心

布局与

列

对齐。现在，

center

对齐在许多情况下会产生不希望的结果。因此，最好使用

将require元素居中。比如说

 <div layout="row">
    <span flex></span>
    <div>
      <h3>Contact Form</h3>
      <span>Fill out the contact form to send me an email.</span>
    </div>
    <span flex></span>
  </div>

联系方式
填写联系表给我发电子邮件。

因此，请查看下面的链接以查看工作示例。

---

你会做笔吗？@nextt1我已经添加了密码笔。我使用了角材网站的空白应用程序。事实上，正因为如此，我了解到错误最有可能存在于ngMessages中。这是可行的，但它迫使我将表单中的每个元素置于中心。这不是很糟糕，但我宁愿使用css媒体查询，也不愿使用外观难看的表单。我想这只是一个bug，我需要在angular material github上发布它。谢谢您的帮助。@Clint您可以根据需要使用

任何适当的值来定位。因为您使用了

start center

layout align，所以我在重放时使用了

。谢谢，我对flex的工作原理感到困惑。您的帖子让我想到了这个解决方案：删除布局对齐，调整表单的每一侧，并根据屏幕大小将表单设置为flex。调整形式似乎解决了这个问题。我觉得很傻。再次感谢你的帮助！没问题：）

 <div layout="row">
    <span flex></span>
    <div>
      <h3>Contact Form</h3>
      <span>Fill out the contact form to send me an email.</span>
    </div>
    <span flex></span>
  </div>