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

Question

我有一个使用bootstrap的网站.它在导航栏的顶部有一个搜索栏,在移动设备上会折叠.

在导航栏下方,我左侧有2列,大约有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>

允许我们有一个按钮,只需移动即可切换折叠和不拆除列.