我正在编写一个MVC 5视图,并对两个视图元素的宽度有疑问。
以下是该视图的图片:
这是我的代码:
<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 spinner
元素与其他表单控件的宽度相同?
以下是"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>
提前致谢。
修改
这是spinner 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;
}
答案 0 :(得分:0)
将此添加到您的CSS
.spinner {
width: 280px;
}
答案 1 :(得分:0)
看起来问题已经解决,但是以一种简单的方式而不是添加新的CSS只需更改下面的代码。
请更改您的css代码,如下所示
input,
select,
.spinner,
textarea {
max-width: 280px;
}