如何在移动引导程序上查看导航栏时将侧栏添加到导航栏中

Question

我有一个使用bootstrap的站点。它在导航栏的顶部有一个搜索栏，在移动时会折叠。

在导航栏下面，我在左边有两列，里面有大约30个单选按钮，用于选择某些搜索过滤器。其他10列显示搜索结果。

在移动设备上，用户必须向下滚动经过所有列才能看到搜索结果。当网站在移动设备上时，我怎么能让单选按钮"折叠到导航栏中"，这样在用户单击导航栏图标之前，单选按钮不会显示。（导航栏图标是3条水平线）。

导航栏：

...
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <form class="navbar-form navbar-left" action="search.php" method="post">
    <div class="form-group">
      <input type="text" class="form-control" name="search_title" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Search</button>
   ...

左列：

<div class="row">
    <div class="col-sm-2">
        <p class="filter-heading" >Site</p>
        <label for="aa-site">
          <input class="site-radio" type="radio" name="store" value="every-site" id="aa-site" checked> All</label></br>
        <label for="bb-site">
          <input class="site-radio" type="radio" name="store" value="wallapop" id="bb-site"> Wallapop</label></br>
  ...
    </div>
  </form>
  <div class="col-sm-10">
    <div class="panel-body center">
...

Answer 1

将其添加到标题中

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

然后用包装列上的内容

<div class="col-sm-2">
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  ...
  </div>
</div>

允许在移动设备上有一个按钮来切换折叠和取消折叠立柱。

Answer 2

您可以简单地将所有内容放在名为"pane"的类中。如果使用overflow:hidden使此窗格与要显示的列一样高，则可以在用户单击按钮时使用javascript展开它。我不知道这是不是你想要的？