2014-10-31 4 views
2

enter image description hereBootstrap выровнен по правому краю

Любая идея, как я могу выровнять кнопку поиска, чтобы быть рядом с окном поиска?

Кодекс

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

Спасибо

Edit - добавлена ​​полная разметка страницы «Похоже, ваш пост в основном код: Пожалуйста, добавьте еще некоторые детали» прости начинку, иначе он выиграл» т пост - вздыхают

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

+0

В Bootstrap CSS по умолчанию этого выровнен http://jsbin.com/hodeqo/1/ - у вас есть другие C делают, что – Christina

+0

Единственным файл КСС site.css (по умолчанию при создании проекта) - я исключил это из проекта и снова запустил его - тот же выпуск – gchq

+1

Согласен с @Christina, у вас либо есть собственный CSS, либо настраиваемый Bootstrap. Как показано на рисунке, ваш код выглядит хорошо http://www.bootply.com/S12VGY7DCx – DavidG

ответ

2

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> 
Смежные вопросы