Asp.net 引导输入组按钮右对齐

如何将搜索按钮与搜索框旁边对齐

代码是

<div class="form-group">
  <label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
  <div class="col-lg-10">
    <div class="input-group">
      <input id="inputLoginSearch" class="form-control" type="text" placeholder="Enter search phrase">
      <span class="input-group-btn">
          <button class="btn btn-info" type="button">Search</button>
      </span>
    </div>
  </div>
</div>

搜索HOA
搜寻

编辑-添加页面的完整标记

<div id="mainDiv" runat="server" class="panel-body">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
        <ContentTemplate>

            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Standard Login</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <%-- Start of Standard Login--%>
                            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                <ContentTemplate>
                                    <div id="StandardLoginForm" role="form" class="form-horizontal">
                                        <fieldset>

                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
                                                <div class="col-lg-10">
                                                    <div class="input-group">
                                                        <input id="inputLoginSearch" class="form-control" type="text" placeholder="Enter search phrase">
                                                        <span class="input-group-btn" >
                                                            <button class="btn btn-info" type="button">Search</button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" for="select">HOA</label>
                                                <div class="col-lg-10">
                                                    <select class="form-control" id="select">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" for="inputUserName">User Name</label>
                                                <div class="col-lg-10">
                                                    <input class="form-control" id="inputUserName" type="text" placeholder="User Name">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" for="inputPassword">Password</label>
                                                <div class="col-lg-10">
                                                    <input class="form-control" id="inputPassword" type="password" placeholder="Password">
                                                </div>
                                            </div>


                                            <div class="form-group">
                                                <div class="col-lg-10 col-lg-offset-2">

                                                    <button class="btn btn-primary" type="submit">Login</button>
                                                </div>
                                            </div>

                                        </fieldset>
                                    </div>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                            <%--End of Standard Login--%>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">HOA Manager Integrated Login</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <%-- Start of Standard Login--%>
                            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                                <ContentTemplate>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                            <%--End of Standard Login--%>
                        </div>
                    </div>

                </div>

            </div>

        </ContentTemplate>

    </asp:UpdatePanel>

</div>

---

如果我在VS2013中创建一个全新的“开箱即用”WebForms项目，同样的事情也会发生。另外，表单垂直会把所有内容都搞得一团糟，只有表单水平才能工作。

DavidG在这个问题上是正确的-问题是删除了输入的最大宽度，使它们分散在整个页面上-所以我找到的解决方法是保留最大宽度，只需将输入组div更改为最大宽度（允许按钮），然后在宽度输入中设置：100%

这似乎很有效

<div class="form-group form-group-sm">
    <label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
    <div class="col-lg-10">
        <div class="input-group" style="max-width: 358px;">
            <input id="inputLoginSearch" runat="server" class="form-control" type="text" placeholder="Enter search phrase" style="width: 100%;"/>
            <span class="input-group-btn">
                <button id="SearchButton" runat="server" class="btn btn-info" type="button">Search</button>
            </span>
        </div>
    </div>
</div>

搜索HOA
搜寻

在默认引导css中，这是对齐的——您有其他css执行此操作唯一其他css文件是site.css（创建项目时的默认值）-我从项目中排除了它并再次运行了它-与@Christina相同的问题树，你要么有一些自定义CSS，要么有一个自定义引导。如图所示，你的代码看起来很好。我倾向于认为你在输入的某处有一个

width

或

max width

属性，而不是按钮是右对齐的。此外，我们不知道这个表单上使用了什么包装。什么类，如果有的话？如果是堆叠表单，表单元素上就没有类