Bootstrap输入组水平对齐问题

时间:2015-05-15 08:19:36

标签: html css twitter-bootstrap

我正在尝试创建一个附加了按钮插件的输入字段,我已经从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>

下图显示了问题:

enter image description here

我使用的是一个ASP.Net MVC 5网站,其中包含Bootstrap 3,我没有添加任何额外的CSS或JS。我已经用可用的最新文件替换了Bootstrap 3文件,看看它是否是一个bug但是没有任何区别。

我已根据另一个SO问题的建议将.input-group包装在.form-group中。

这个问题可以在Chrome和IE 11中复制。我是一个布偶吗?我错过了什么想法?非常感谢。

1 个答案:

答案 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;
}