1

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

非常感谢所有帮助。

谢谢

4

1 回答 1

2

您的手风琴按钮不需要驻留在容器中才能正常工作，因此只需删除.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

于 2013-01-17T12:53:56.473 回答