ASP.NET 表单中的 md 按钮大小不正确答案

【问题标题】：md-button in ASP.NET form is not correctly sizedASP.NET 表单中的 md 按钮大小不正确
【发布时间】：2017-03-21 16:44:27
【问题描述】：

我有一个 ASP.NET 表单，我想在其中添加一个 md 按钮，但是当我将我的 md 按钮放在表单中时，它会调整大小并且它不适合我想要的行。

我找不到有关此行为的任何文档，我尝试在按钮本身上设置布局，将其放入 md-input-container 等...

我想要表单中的这个按钮，这样我就不必自己重写提交表单功能了。

这是我的 HTML 表单：

<div layout-padding layout="column">
    @using (Html.BeginForm("Login", "Home", FormMethod.Post))
    {
        <md-input-container class="mt-35" layout="row">
            <label>Ton email :</label>
            @Html.TextBoxFor(x => x.Username)
        </md-input-container>
        <md-input-container layout="row">
            <label>Ton mot de passe :</label>
            @Html.PasswordFor(x => x.Password)
        </md-input-container>
        <md-input-container layout="row">
            <md-checkbox aria-label="Rester connecté">
                Rester connecté
            </md-checkbox>
        </md-input-container>
        <md-button class="md-raised md-primary">Me connecter</md-button>
        <!-- This button doesn't fit -->
    }
    <md-button class="md-raised md-primary">Connect with Facebook</md-button>
    <!-- This one does -->
</div>

我没有更改任何 CSS，我正在使用 Angular Material 1.1.0

这是我想要实现的和我现在拥有的两个屏幕截图：

这就是我现在所拥有的，上面写的代码。

这就是我想要实现的目标。

编辑：这是我的附加 CSS：

.parent {
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}

.mt-35 {
    margin-top: 35px !important;
}

.mb-35 {
    margin-bottom: 35px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.md-content.md-default-theme, md-content {
    background-color: white !important;
    border-radius: 10px !important;
}
.md-datepicker-input-container {
    width: 100% !important;
}
.md-datepicker-input {
    max-width: 100% !important;
}

【问题讨论】：

你能发布你的 CSS
我只是使用 github.com/angular/material 的 Angular Material 1.1.0 我写的唯一额外的 CSS 与此无关，但我会发布它
在浏览器开发者工具上使用检查器，您会看到阻止它完整显示的任何 CSS。
已经这样做了，在按钮和所有子元素上我有max-width: 100%;
如果我只是删除表单标签，按钮会在我的页面上正确呈现。

标签： c# html asp.net razor angular-material

【解决方案1】：

找到了！

表单弄乱了布局，我通过在 BeginForm 方法中添加布局属性使其工作：

@using (Html.BeginForm("Login", "Home", FormMethod.Post, new { @layout = "column" }))
            {
                <md-input-container class="mt-35" layout="row">
                    <label>Ton email :</label>
                    @Html.TextBoxFor(x => x.Username)
                </md-input-container>
                <md-input-container layout="row">
                    <label>Ton mot de passe :</label>
                    @Html.PasswordFor(x => x.Password)
                </md-input-container>
                <md-input-container layout="row">
                    <md-checkbox aria-label="Rester connecté">
                        Rester connecté
                    </md-checkbox>
                </md-input-container>
                <md-button class="md-raised md-primary md-button-no-margin" layout-padding type="submit">Me connecter</md-button>
            }

以及自定义 CSS 以消除 md-button 类中的边距：

.md-button-no-margin {
    margin: 0 !important;
}

【讨论】：