Twitter Bootstrap form-inline沒有內襯控件Up

Question

我在Rails應用程序中使用Twitter Bootstrap。我正在嘗試使用搜索按鈕和幫助按鈕排列搜索字段，該按鈕將使用Accordion Javascript控件通過幫助內容來擴展以下區域。

我有一切工作，但是，幫助按鈕並不與其他控件在同一行。手風琴控制需要一個DIV，所以我不確定是否會導致問題。而不是保持在同一行上，幫助按鈕出現在左對齊的搜索字段的正下方。

這裏是我的代碼：

<p><strong>Enter Search Criteria</strong></p> 
     <form class="form-inline"> 

      <input type="text" class="input-large" placeholder="Name, Phone, Conf Rm" autofocus > 
      <button type="submit" class="btn">Search</button> 
      <div class="details"> 

         <!-- accordian button --> 

       <div class="accordion"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseHelp"> <button type="link" class="btn btn-info btn-small"> 
         <i class="icon-question-sign"></i> 
        </button></a> 
       </div> 
     </form> 
    </div> 

    <!-- Accordian area --> 

     <div id="collapseHelp" class="accordion-body collapse style="height: 0px; "> 
      <div class="accordion-inner"> 
      <p><strong>Person Search:</strong> Last Name, First Name (e.g. Smith, John)</p> 
       <p><strong>Conference Room Search:</strong> Plaza-Building, Suite-Name (e.g South-I2W-20E-1)</p> 
       <p><strong>Phone Number Search:</strong> Please provide at least the last 4 digits of the phone number (e.g. 8686)</p> 
      </div> 
     </div> 

    <!-- End accordian area --> 

所有幫助是極大的讚賞。

感謝

Answer 1

你的手風琴按鈕並不需要以功能駐留在容器內，所以只是刪除.details和.accordion容器和您的按鈕應排隊與控制按鈕就好的其餘部分。

HTML

<p><strong>Enter Search Criteria</strong></p> 
     <form class="form-inline"> 

      <input type="text" class="input-large" placeholder="Name, Phone, Conf Rm" autofocus > 
      <button type="submit" class="btn">Search</button> 
         <!-- accordian button --> 

      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseHelp"> <button type="link" class="btn btn-info btn-small"> 
       <i class="icon-question-sign"></i> 
      </button></a> 

     </form> 


    <!-- Accordian area --> 

     <div id="collapseHelp" class="accordion-body collapse" style="height: 0px; "> 
      <div class="accordion-inner"> 
      <p><strong>Person Search:</strong> Last Name, First Name (e.g. Smith, John)</p> 
       <p><strong>Conference Room Search:</strong> Plaza-Building, Suite-Name (e.g South-I2W-20E-1)</p> 
       <p><strong>Phone Number Search:</strong> Please provide at least the last 4 digits of the phone number (e.g. 8686)</p> 
      </div> 
     </div> 

    <!-- End accordian area --> 

演示： http://jsbin.com/eyajig/1