Question

我创建了一个应用程序，其中搜索功能是最重要的部分。因此，我决定将搜索表单放在标题栏中，以便在每个页面上都可以使用它。效果很好，只在移动设备上我遇到流体布局导致搜索字段覆盖大部分屏幕的问题。

因此，在移动设备上以与导航栏相同的方式折叠此标题栏会很棒。不幸的是，我没有得到这个工作。我尝试使用一个完全不起作用的导航栏来解决这个问题（见下文）。

我的另一个想法是创建两个不同的搜索栏，一个折叠的搜索栏和一个隐藏的搜索栏，并使用Bootstrap的.hidden- *和.visible- *类。不知道这将如何执行，除此之外我还没有想出如何在Bootstrap中创建一个非导航标题栏。

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid col-md-12">
        <div class='row'>
            <div class='col-md-8'>
                <div class="navbar-header">         
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="./index.php">Home</a>
                </div>
                <form method='post' class='form-inline' role='form' action='./search.php'>
                    <div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>

                        <!-- several form elements (search boxes) go here -->

                    </div>
                </form>
            </div>
            <div class='col-md-4' style='padding-top: 7px;'>

                    <!-- Session & status information go here -->

            </div>
        </div>
    </div>
</nav>

知道如何在大屏幕上显示我的搜索字段并将其折叠在移动设备上吗？

Answer 1

你没有给我们太多的工作，但就崩溃而言，我会选择css和jQuery的组合。这是我如何通过简单地创建自己的小＆＃34; bootstrap-like＆＃34;来解决这个问题的要点。崩溃。

html：使用一个按钮创建自己的小导航结构，该按钮将在移动设备上显示您的表单。

<ul class="search-nav">
    <li class="collapse-button">ICON</li>
    <li class="search-form">
         <form method='post' class='form-inline' role='form' action='./search.php'>
                <div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>

                    <!-- several form elements (search boxes) go here -->

                </div>
          </form>
    </li>
 </ul>

css：在大屏幕设备上不显示折叠按钮。在小屏幕设备上，可以显示折叠按钮，但默认情况下必须隐藏表单。所有这些都可以使用媒体查询来实现： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

.collapse-button{
    display: none;
}

.search-form{
    display: block;
}

@media (max-width: 480px){
    .collapse-button{
        display: block;
    }

    .search-form{
        display: none;
    }
}

jQuery：如果用户点击折叠按钮，表单将在显示与否之间切换。像这样：

$( ".collapse-button" ).click(function() {
  $( ".search-form" ).toggle(function() {
     $( ".search-form" ).css("display","block");
  }, function() {
     $( ".search-form" ).css("display","none");
  });
});

这只是一般的想法。我可能实际上将窗体的最大高度设置为0并溢出：隐藏在具有较小屏幕的设备上，并且在具有较大屏幕的设备上具有较大的最大高度。通过这种方式，您可以添加一个css过渡，使其更流畅地扩展。

在Bootstrap中创建可折叠标题栏（无导航）

1 个答案: