MVC 5 ビューをコーディングしていますが、2 つのビュー要素の幅に関して質問があります。
ビューの写真は次のとおりです。
これが私のコードです：
<div class="form-group">
@Html.LabelFor(model => model.width, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group spinner">
@Html.EditorFor(model => model.width, new { htmlAttributes = new { @class = "form-control" } })
<div class="input-group-btn-vertical">
<button type="button" id="inputSpinnerUpWidth" class="btn btn-default"><i class="fa fa-caret-up"></i></button>
<button type="button" id="inputSpinnerDownWidth" class="btn btn-default"><i class="fa fa-caret-down"></i></button>
</div>
</div>
@Html.ValidationMessage("assetwidth")
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.height, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group spinner">
@Html.EditorFor(model => model.height, new { htmlAttributes = new { @class = "form-control" } })
<div class="input-group-btn-vertical">
<button type="button" id="inputSpinnerUpHeight" class="btn btn-default"><i class="fa fa-caret-up"></i></button>
<button type="button" id="inputSpinnerDownHeight" class="btn btn-default"><i class="fa fa-caret-down"></i></button>
</div>
</div>
@Html.ValidationMessage("assetheight")
</div>
</div>
および要素は、他のフォーム コントロールWidthとHeight同じ幅ではありません。input-group spinner2 つの要素を他のフォーム コントロールと同じ幅にするにはどうすればよいですか?
"Asset name"HTML 要素のビュー コードは次のとおりです。
<div class="form-group">
@Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
</div>
</div>
前もって感謝します。
編集
スピナーのCSSコードは次のとおりです。
.spinner input {
text-align: right;
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}
.input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
margin-top: -2px;
border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
position: absolute;
top: 0;
left: 4px;
}
Site.css には、次のコードがあります。
input,
select,
textarea {
max-width: 280px;
}
input-group spinner上記の CSSに を追加するにはどうすればよいですか?
私は次のことを試しました：
input,
select,
spinner,
textarea {
max-width: 280px;
}