自举输入组按钮右对齐

任何想法如何将搜索按钮对齐到搜索框旁边？

代码是

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

谢谢

编辑 - 页面添加了完整的标记“它看起来像你的文章大多是代码：请添加更多的细节”原谅填充，否则它赢得了” T型柱 - 感叹

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

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

由于某种原因，无法添加注释！

enter image description here

来源

2014-10-31 gchq

在默认情况下引导的CSS这对准http://jsbin.com/hodeqo/1/ - 你还有其他的CSS这样做 – Christina 2014-10-31 17:07:14

唯一的其他CSS文件的site.css（默认为创建项目时） - 我将它从项目中排除并再次运行 - 同样的问题 – gchq 2014-10-31 17:11:54

同意@Christina，您可以使用一些自定义CSS或自定义Bootstrap。正如所示，你的代码看起来很好http://www.bootply.com/S12VGY7DCx – DavidG 2014-10-31 17:16:41

DavidG是对的问题 - 这个问题是针对输入去除最大宽度使他们正确的整个页展开的 - 所以我找到了解决办法是离开的最大宽度，和只需将input-group 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>

来源

2014-11-01 21:50:36 gchq

自举输入组按钮右对齐

回答

相关问题