html - 字段有效时 Angular Material 形式缩小

Question

我将 Angular Material 用于联系表单。但是，当前 2 个元素中的一个或两个都有效时，表单的宽度会缩小。因此，当主题有效时，表单会缩小，而当电子邮件有效时，表单会再次缩小。当它是一行和一列时，表格会收缩。

我发现的一种解决方法是将 flex 放在表单元素上，但这会导致表单填满页面的整个宽度，这是不希望的。我还弯曲了其上方和下方的表单和跨度元素，但这只会使表单比两个字段有效时更受挤压。

<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>

编辑

目前，我已经解决了 CSS 媒体查询的问题，但我宁愿不必这样做。

@media screen and (min-width: 960px) {
    form {
        width: 610px;
    }
}

@media screen and (max-width: 959px) {
    form {
        width: 400px;
    }
}

编辑

Codpen添加

Answer 1

您正在使用 start center布局对齐 column .现在center在许多情况下，对齐会产生不希望的结果。所以最好使用<span flex></span>使 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>

因此请查看以下链接以检查工作示例。 http://codepen.io/next1/pen/YqRVWo