我正在尝试创建一个附加了按钮插件的输入字段,我已经从Bootstrap文档中复制了代码,但输入字段和按钮似乎具有相反的水平对齐。我已经看过Chrome开发者工具中的应用样式,但是不知道发生了什么。
以下是代码段:
<div class="panel-heading">Checkins on @ViewBag.QryDate</div>
<div class="panel-body">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">Date:</div>
<input type="date" class="form-control" id="exampleInputAmount" placeholder="@ViewBag.QryDate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
下图显示了问题:
我使用的是一个ASP.Net MVC 5网站,其中包含Bootstrap 3,我没有添加任何额外的CSS或JS。我已经用可用的最新文件替换了Bootstrap 3文件,看看它是否是一个bug但是没有任何区别。
我已根据另一个SO问题的建议将.input-group包装在.form-group中。
这个问题可以在Chrome和IE 11中复制。我是一个布偶吗?我错过了什么想法?非常感谢。
答案 0 :(得分:0)
感谢您的建议 - 经过进一步调查后,ASP.Net MVC 5 Site.css中包含的以下默认样式导致了问题:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}