如何将搜索框结果导入Bootstrap中的滚动条?

时间:2013-11-17 07:04:09

标签: html twitter-bootstrap

我正在设计一个带Bootstrap的搜索页面。任何人都可以提供一些提示,如何将下拉搜索框更改为可滚动搜索框(即框大小是固定的,人们可以滚动可能的结果)? 图:https://www.dropbox.com/s/a1kyotwvcj0jcft/Screen%20Shot%202013-11-16%20at%2011.38.45%20PM.png 相关代码是:

@helper.form(action = routes.Figure6.submit(), 'class -> "form-group form-search subscribe-container", 'method -> "get") {
        <div class="input-group @("has-error".when(appForm.hasErrors))">

            <input type="hidden" name="id" id="id" value="@appForm("id").value" required>
            <input type="text" name="appName" id="appName" class="form-control input-lg"
                placeholder="App name" required>
            <span class="input-group-btn">
                <button class="btn btn-success input-lg" type="submit">Go!</button>
            </span>

        </div>
        <span class="help-block">
            @if(appForm.error("appName") != null) {
                @appForm.error("appName").message
            }
        </span>
    }
    <!-- Modal -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Alert</h4>
          </div>
          <div class="modal-body">
            Sorry, App: @appForm("appName").value @appForm("id").value  is not found in the database.
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="footer align-center">
        <span class="copyright transparent lighting-border rounded-corner">
            &copy; 2013 All rights reserved. </span>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

请为您的解决方案试用此教程:

http://eichefam.net/2012/04/12/scrollable-menus-in-bootstrap/