按钮始终向右对齐答案

【问题标题】：Button is always aligned to the right按钮始终向右对齐
【发布时间】：2015-12-15 18:00:24
【问题描述】：

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

这是导致问题的 css 的 sn-p：

/* 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/

为什么默认是这样的？我该如何解决？

【问题讨论】：

它是如何导致问题的？
我不确定，但如果我评论那部分，那么搜索栏会连接到“开始”按钮（搜索栏变大）
在开发者工具中检查这个按钮，我相信你会找出原因。对我来说，max-width 导致了这个问题是没有意义的。
请显示 .input-group-btn 的 css 和按钮本身。
css 没有被修改，它来自bootstrap.css 这是我在提琴手jsfiddle.net/5wczeuf7/2 中的问题

标签： html css asp.net-mvc twitter-bootstrap alignment

【解决方案1】：

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

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

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

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

【讨论】：

没问题！请记住，这会影响具有该引导类的所有其他对象，因此您可能只将其应用于该 div。祝你好运。