bootstrap导航栏的自动折叠隐藏

Bootstrap导航栏的自动折叠隐藏是一个很常见的需求，特别是在小屏幕设备上，为了避免导航栏占用过多屏幕空间，通常会自动折叠隐藏导航栏内容。

在Bootstrap中，可以通过以下步骤实现导航栏的自动折叠隐藏：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
然后，在导航栏的HTML结构中添加一个用于折叠的容器元素。该容器元素用于包含需要折叠的导航栏内容。例如，可以添加一个div元素，如下所示：
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
</div>
最后，通过Bootstrap的JavaScript插件，将按钮元素与折叠容器元素相关联，使得点击按钮时可以触发导航栏的折叠和展开。可以使用以下代码：
$(document).ready(function(){
  $('.navbar-toggler').click(function(){
    $('.navbar-collapse').toggleClass('collapse');
上述代码使用了jQuery库，因此需要先引入jQuery库。该代码将导航栏的折叠容器元素的class属性从“collapse”和“navbar-collapse”之间进行切换，从而实现导航栏的折叠和展开。
以上就是实现Bootstrap导航栏自动折叠隐藏的基本步骤，希望对你有所帮助。