我正在编写MVC 5视图,我想在选择列表旁边放置一个按钮。我当前的代码将按钮放在选择列表下。
这是我的代码:
<div class="form-group">
@Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" })
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Select" class="btn btn-default" />
</div>
</div>
</div>
这是一个显示按钮位置的图像:
提前致谢。
UPDATE
即使我有以下代码,按钮也在选择列表下:
<p>
@Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" }) <input type="submit" value="Select" class="btn btn-default" />
</p>
不要将提交按钮放在div中。
div默认为display: block
。
<div class="input-group">
@Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" })
<span class="input-group-btn">
<input type="submit" value="Select" class="input-group-addon btn btn-default" />
</span>
</div>
通过在div上使用input-group类,在span上使用input-group-btn,在select按钮上使用input-group-addon,可以将dropdownlist和按钮放在同一行上。
参考这篇文章:https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-input-groups.php