按钮始终与右侧对齐

Question

我直接从bootstrap的网站上获取了代码，但按钮始终与右边对齐。经过所有的视图模板和CSS后，我找到了罪魁祸首。我认为这个问题来自Site.css，它默认出现在MVC Web应用程序中。当我将其注释掉时，搜索栏会展开以连接Go按钮

这是导致问题的CSS代码段：

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

我的代码如下：

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />

<div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
</div>

这是我的问题的一个示例：https://jsfiddle.net/5wczeuf7/2/

为什么默认情况下这样？我该如何解决？

Answer 1

该按钮的父div使其向右移动，我通过从父div中删除宽度来修复它：

.input-group-addon, .input-group-btn {
    width: 0;
}

如果您不想影响所有内容，只需要一个，则必须向父div添加自定义类或ID。

JSFiddle：https://jsfiddle.net/DTcHh/12246/