Bootstrap输入组水平对齐问题

Question

我正在尝试创建一个附加了按钮插件的输入字段，我已经从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中复制。我是一个布偶吗？我错过了什么想法？非常感谢。

Answer 1

感谢您的建议 - 经过进一步调查后，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;
}