Angular2 Material md-select 不与 md-input 内联答案

【问题标题】：Angular2 Material md-select not inline with md-inputAngular2 Material md-select 不与 md-input 内联
【发布时间】：2017-04-20 16:24:14
【问题描述】：

我正在尝试使用Angular2 Material 和引导网格创建一个表单，我的 HTML 如下所示：

<div class="row">
    <div class="col-md-6 marign-top-10 margin-bottom-10">
        <md-input-container class="full-width">
            <input
                mdInput
                type="text"
                formControlName="postal"
                placeholder="Postal">
        </md-input-container>
    </div>

    <div class="col-md-6 marign-top-10 margin-bottom-10">
        <div class="full-width">
            <md-select class="full-width" placeholder="Country" formControlName="country_id">
                <md-option *ngFor="let country of countries" value="{{country.id}}">{{ country.name }}</md-option>
            </md-select>
        </div>
    </div>
</div>

我的全角 css 类刚刚设置了 width:100%。

问题在于输入不在应有的同一行这是一些截图：（我的应用程序是从右到左的语言，所以忽略文本方向）

【问题讨论】：

标签： css angular material-design angular-material angular-material2

【解决方案1】：

这是一个 CSS 问题，您可以将其添加到组件样式表中：

.mat-select{
      margin-top:10px;
 }

play 值可能大于 10 或更低

【讨论】：

【解决方案2】：

这是md-select样式的问题，我在项目中也遇到了问题，所以我的解决方案是：

CSS

md-select {
    min-height: 30px; // or any value that equal md-input-container>input height
}

JSFiddle example

【讨论】：

我复制了您的 JSFiddle 示例，现在出现此错误：“错误：md-input-container 必须包含 mdInput 指令。您是否忘记将 mdInput 添加到本机输入或 textarea 元素”
因为我的例子是angular1，所以你应该继续使用angular2-material 构造<input mdInput placeholder="Postal" formControlName="postal">