Question

如何将搜索按钮对齐到搜索框的旁边？

代码是

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

如果我创造一个全新的＆＃39;开箱即用＆＃39; VS2013中的WebForms项目也发生了同样的事情。形式垂直也使一切都变得混乱，只有形式水平的作品。

Answer 1

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>

Bootstrap输入组按钮右对齐

1 个答案: