html - 在 Bootstrap 中创建可折叠的标题栏(无导航)

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 的组合。以下是我将如何通过简单地创建您自己的“类似 Bootstrap ”的小崩溃来解决这个问题的要点。

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 转换，使其更流畅地展开。