我有一个ASP.NET表单,其中我想添加一个md按钮,但是当我将md-button放在表单中时,它会被调整大小并且它不适合我想要的行。< / p>
我找不到有关此行为的任何文档,我尝试在按钮本身上设置布局,将其放在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;
}
答案 0 :(得分:0)
发现它!
表单弄乱了布局,我通过在BeginForm方法中添加layout属性来实现它:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline'; media-src *">
自定义CSS以消除@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>
}
类中的边距:
md-button