부트 스트랩 입력 그룹 버튼이 오른쪽 정렬되었습니다

enter image description here 부트 스트랩 입력 그룹 버튼이 오른쪽 정렬되었습니다

검색 상자 옆에 검색 버튼을 어떻게 정렬시킬 수 있습니까? 충전 용서 ', 그렇지 않으면 원 -

코드

<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

는 http://jsbin.com/hodeqo/1/를 정렬 - 프로젝트가 생성 될 때 유일한 다른 CSS 파일이 site.css (기본값입니다 – Christina

것을하고 다른 CSS를) - 프로젝트에서 제외시킨 후 다시 실행했습니다. 같은 문제 – gchq

@Christina와 동의하면 맞춤 CSS 또는 맞춤 부트 스트랩이 있습니다. 위와 같이 코드가 멋지게 보인다. http://www.bootply.com/S12VGY7DCx – DavidG

DavidG이 문제에 대한 옳았다 - 문제는 입력에 대해 최대 폭을 제거했다 그들이 바로 전체 페이지에 걸쳐 확산했다 - 그래서 내가 찾은 해결 방법에 최대 폭을 떠나, 그리고를 입력 그룹 div를 최대 너비 (버튼 허용)로 변경 한 다음 너비 : 100 %에서 입력을 설정하십시오.

이것은 잘 작동하는 것 같습니다. 이 기본 부트 스트랩 CSS에서

<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

부트 스트랩 입력 그룹 버튼이 오른쪽 정렬되었습니다

답변

관련 문제