按钮始终右对齐

Question

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

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

如果您不想影响所有内容，而只想影响一个，则必须添加一个自定义 class 或 id 到父项 div。

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

按钮始终右对齐

Button is always aligned to the right

html

css

asp.net-mvc

alignment

twitter-bootstrap