html - 按钮始终右对齐

Question

我直接从 bootstrap 的网站上获取了代码，但按钮总是右对齐。在检查了所有 View 模板和 CSS 之后，我找到了罪魁祸首。我认为问题来自 Site.css，它默认出现在 MVC 网络应用程序中。当我将其注释掉时，搜索栏会展开以连接到“前往”按钮

这是导致问题的 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/