在移动引导程序中查看时，如何将侧栏添加到导航栏中
我有一个使用引导程序的网站。 它在导航栏的顶部有一个搜索栏，在移动时会崩溃。
在导航栏下方，我在左侧有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">
...
将此添加到标题中
<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>
允许人们拥有一个按钮，可以在移动设备上切换折叠和解开列。
您可以将所有内容放在名为“窗格”的类中。 如果您使该窗格与您想要显示的列一样高，并使用overflow:hidden ，则可以在用户单击该按钮时使用javascript扩展它。 我不知道这是你想要的吗？
上一篇: How to add a side column to the navbar when its viewed on mobile bootstrap