twitter-bootstrap 相关问题

Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。

具有等效表行跨度和列跨度的引导网格

我正在尝试在 bootstrap3 中创建一个像这样的布局在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ 。容器 { 顶部边距：10px； } 我正在尝试在 bootstrap3 中创建一个像这样的布局在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ .container { margin-top: 10px; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-fluid"> <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div> <div class="span8"> <div class="row-fluid"> <div class="span6"><div class="well">2</div></div> <div class="span6"><div class="well">3</div></div> </div> <div class="row-fluid"> <div class="span6"><div class="well">4</div></div> <div class="span6"><div class="well">5</div></div> </div> </div> </div> <div class="row-fluid"> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> </div> 我能够使用嵌套网格来做到这一点 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="row mx-auto" style="height: 200px;"> <div class="col-sm-6"> <div class="row ">  <div class="col-sm-12 ">  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </div> <div class="row">  <div class="col-sm-6"> BBBBBBB </div> <div class="col-sm-6"> CCCCCCCCC </div> </div> </div> </div> <div class="col-sm-3"> DDDDDD </div> </div> </div>

twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

如何禁用日期选择器角度中的过去日期

我有一个带有日期选择器的输入字段。我需要用户仅从当前日期选择日期，而过去的日期不应单击。下面是代码。我有一个带有日期选择器的输入字段..我需要用户仅从当前日期选择日期，过去的日期不应该可单击..下面是代码。 <div class="col-lg-4"> <input class="form-control" type="datetime" date-time auto-close="true" view="date" min-view="date" maxlength="10" format="dd/MM/yyyy" ng-model="$ctrl.DateInput" placeholder="renewal date" required="true"> </div> 感谢快速帮助.. 谢谢！ <input class="form-control m-input pl-6" type="date" [min]="todayDate"formControlName="dateValidity"> 最小和最大是用于验证输入范围的日期属性，这些属性将禁用日历弹出窗口上的之前和之后的日期。在你的 ts 中定义最短日期 todayDate=this.datePipe.transform(new Date(), 'yyyy-MM-dd'); 代码： <html> <head> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> <script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> </head> <body style="Padding:20px;"> <form> <div ng-app="myApp" ng-controller="myCntrl"> Date: <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="dt" is-open="showdp" /> <span> <button type="button" class="btn btn-default" ng-click="showcalendar($event)"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </div> <script language="javascript"> angular.module('myApp', ['ngAnimate', 'ui.bootstrap']); angular.module('myApp').controller('myCntrl', function ($scope) { $scope.today = function () { $scope.dt = new Date(); }; $scope.mindate = new Date(); $scope.dateformat="MM/dd/yyyy"; $scope.today(); $scope.showcalendar = function ($event) { $scope.showdp = true; }; $scope.showdp = false; }); </script> </form> </body> </html> 工作为：如果您想缩小可能日期的范围，请添加最小日期或最大日期，如示例中所示。 http://plnkr.co/edit/QiQDiPXhuO0eTPxxdGnd?p=preview 以下是文档的相关部分： https://angular-ui.github.io/bootstrap/#/datepicker max-date（默认：null）-定义最大可用日期。 min-date（默认值：null）- 定义最小可用日期。您可以通过结合使用 HTML 和 TypeScript 来禁用 Angular 中 datetime-local 类型的 HTML 5 输入中的过去日期。组件.html <input type="datetime-local" min="{{dateToday() | date:'yyyy-MM-ddTHH:mm:ss.sss'}}" /> 我们使用 min 属性将允许的最小日期设置为当前日期和时间。 minDate() 函数以与 datetime-local 输入类型兼容的格式返回当前日期和时间。您可以修改它以满足您的需求。组件.ts dateToday(): Date { const now = new Date(); const year = now.getFullYear(); const month = now.getMonth() + 1; const day = now.getDate(); const hour = now.getHours(); const minute = now.getMinutes(); return new Date(year, month, day, hour, minute); } 此函数返回一个 Date 对象，表示当前日期和时间，但秒和毫秒设置为零。这可确保最小日期是当前分钟的开始，而不是用户加载页面的确切时刻。 datetime-local 输入仅允许用户选择从当天开始的未来日期和时间。我希望这对这篇文章的新访客有所帮助。在你的 ts 文件中添加 minDate = 新日期(); 在角度 16 并导入MatInputModule 在 html 中只需在输入中添加 [min]="minDate" <div class="tagus-form-group without-icon"> <mat-form-field appearance="fill"> <mat-label>End date</mat-label> <input [min]="minDate" matInput [matDatepicker]="endDatePicker" formControlName="endDate" /> <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle> <mat-datepicker #endDatePicker></mat-datepicker> </mat-form-field> </div>

javascript html angularjs twitter-bootstrap meteor

回答 5 投票 0

Bootstrap 列在 Firefox 中无法正确显示

我的 Bootstrap 网格在 Safari 和 Chrome 中运行良好，但在 Mozilla Firefox 中运行不佳。当我稍微最小化它时它工作得很好，但在全屏尺寸上却不起作用。 &... 我的 Bootstrap 网格在 Safari 和 Chrome 中运行良好，但在 Mozilla Firefox 中运行不佳。当我稍微最小化它时它工作得很好，但在全屏尺寸上却不起作用。 <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"> 1 </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"> 2 </div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> 3 </div> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12"> a </div> <div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12"> b </div> <div class="single-offer col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12"> c </div> </div> </div> </div> </div> </div> 您知道为什么会发生这种情况吗？事实证明根本不是这部分的事。问题是上面的行有 1px 的可用空间，所以 Firefox 试图将这部分塞到该行中，结果把一切搞乱了。解决方案： .container-fluid>.row {clear:both} 抱歉误导大家了。 TL;DR：有同样的问题。就我而言，它是与我的行位于同一容器中的一个杂散元素，结果证明这是罪魁祸首。然而，在我发现这一点之前，我设法通过 CSS 以一种 hacky 的方式快速修复了它。我的代码中也有同样的问题。在其他地方看起来都不错，但在 Firefox 中，一个元素被推到了下一行。作者提供的解决方案对我来说不起作用，所以我用 hacky 的方式做到了。我为其中一列设置了最大宽度属性。我有一排由 .col-md-3 制成的。通过 CSS，我为其中一个设置了一个自定义 max-width 属性，该属性足够小以使问题消失 - 对我来说是 max-width: 25%; 但是，在那之后，我发现问题出在杂散的元素上，该元素以某种方式丢失在放置我的行的容器中。 Firefox 将其渲染为宽度为 0.19px，而其他浏览器则忽略它。删除后问题就解决了。您的标记不正确。你的开头应该是： <div class="container-fluid">

css twitter-bootstrap firefox

回答 3 投票 0

Bootstrap 模态仅显示 MongoDB 集合中的第一个元素

我正在使用 NodeJS、Handlebars 和 Bootstrap 构建一个简单的 Web 应用程序。它应该循环遍历模拟产品的 MongoDB 集合并显示其字段。我正在“产品...

twitter-bootstrap express handlebars.js

回答 1 投票 0

在日期选择器 AngularJS 上使用 ng-change

我正在创建一个网络应用程序，我想在我的日期选择器文本框的 ng-change 上在控制台中显示日期这是我的代码输入日期 &l... 我正在创建一个网络应用程序，我想在我的日期选择器文本框的 ng-change 上在控制台中显示日期这是我的代码 <div class="form-group"> <h3>Enter Date</h3> <div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> <input class="form-control" ng-model="mddate" ng-blur="chngDate(mddate)" type="text" readonly /> </div> <style> label { margin-left: 20px; } #datepicker { width: 180px; margin: 0 20px 20px 20px; } #datepicker > span:hover { cursor: pointer; } </style> <script> $(function () { $("#datepicker").datepicker({ autoclose: true, todayHighlight: true }).datepicker('update', new Date());; }); </script> </div> 但问题是 ng-change 不能与 bootstrap datepicker 一起使用，这是我在控制器中的功能 $scope.chngDate = function (date) { var dates = new Date(); console.log(dates); } 我尝试在特定文本框上使用 $watch 函数，但这也不起作用 $scope.$watch('mddate', function (newValue, oldValue) { console.log('oldValue=' + oldValue); console.log('newValue=' + newValue); //do something }); 这首先显示未定义的值，然后该函数未执行我需要做什么？使用 ng-blur 而不是 ng-change，它对我有用尝试 date-change="chngDate()"

angularjs twitter-bootstrap datepicker angularjs-ng-model angularjs-ng-change

回答 2 投票 0

Angular 17 + Bootstrap 5 .3启用暗/亮模式

在 Bootstrap 5 的文档中，默认支持深色模式。启用深色模式我使用 Angular 17 和 ng-bootstrap 16.0.0 构建了一个 FE。如何整合这些深色模式？我是 Angular 世界的新人，所以...

angular twitter-bootstrap

回答 1 投票 0

使用引导响应网格系统时如何为图像提供动态宽度和高度

我正在使用 bootstrap 的网格系统，这是我的网站。问题是，在初始加载时，项目卡看起来非常糟糕，如下所示：这是加载后的样子：你可以...

html css twitter-bootstrap twitter-bootstrap-3

回答 7 投票 0

引导日期选择器在第一次单击时无法工作[显示]

我的表单中有 Bootstrap datepicker，起初它工作正常，但现在，在我使用 jquery .load 函数加载包含 datepicker 元素的表单后，它无法工作/显示自己

javascript jquery html css twitter-bootstrap

回答 3 投票 0

在 Bootstrap v5.0.0-alpha1 中我可以使用什么媒体（BS 3/4）？

我想在 Bootstrap v5.0.0-alpha1 中使用媒体对象，但是如何呢？在 Bootstrap 3 和 4 中，我这样使用它：我想在 Bootstrap v5.0.0-alpha1 中使用媒体对象，但是如何使用？在 Bootstrap 3 和 4 中，我这样使用它： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"> <div class="container mt-3"> <h2>Media Object</h2> <p>Create a media object with the .media and .media-body classes:</p> <div class="media border p-3"> <img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>John Doe <small>Posted on February 19, 2016</small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> 在 v5.0.0-alpha1 中，我可以将哪个类用于媒体对象？我无法在 Bootstrap 5 中找到任何名为“media”的类。在 Bootstrap 5 中，.media 对象已被删除。相反，您可以使用实用程序类和 Flexbox 来创建类似的布局。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"/> <div class="container mt-3"> <h2>Media Object</h2> <p>Create a media object without .media and .media-body classes (BS5):</p> <div class="d-flex border p-3"> <img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe" class="flex-shrink-0 me-3 mt-3 rounded-circle" style="width:60px;height:60px;"> <div> <h4>John Doe <small>Posted on February 19, 2016</small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> Bootstrap 5 的文档说明了如何使用卡片来实现旧的媒体对象布局。 https://getbootstrap.com/docs/5.0/components/card/#horizontal 例如： <div class="card mb-3 border-0"> <div class="row g-3"> <div class="col-md-4"> <svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg> </div> <div class="col-md-8"> <div class="card-body p-0"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> 对于那些只使用 Bootstrap 网格部分的人，您可以实现如下所示的媒体对象布局： <figure class="row"> <p class="col-auto"> <img src="https://placeimg.com/100/100/animals" alt="A cute animal"> </p> <figcaption class="col">Look at the cute animal</figcaption> </figure> col-auto 将列收缩包裹到内容的宽度（在上面的示例中为图像），而 col 只是占用（或分配，如果有多个）剩余空间。请参阅文档，了解更多信息。

javascript html css twitter-bootstrap bootstrap-5

回答 3 投票 0

如何在 Bootstrap Accordion 的标题上添加按钮，这样单击按钮就不会折叠或展开它

这里我在Accordion的标题上添加了2个按钮，但是当我单击按钮时，整个Accordion会折叠或展开。有没有一种方法可以向其添加按钮，以便单击它们...

html twitter-bootstrap

回答 1 投票 0

如何将矩形放置到选定的div角

报表设计器使用div来创建字段、水平线和垂直线。 Jquery UI selectable 用于使它们可选择网页： ... Report desiger 使用 div 创建字段、水平线和垂直线。 Jquery UI selectable 用于使它们可选择 HTML： <div class='designer-panel-body' style='height:100px'> <div class='designer-label' style='top:10px'> Field1 </div> <div class='designer-label' style='top:60px; left:20px'> Field2 </div> <div class='designer-label' style='top:10px; left:120px; height:60px'> </div> </div> CSS： .designer-label { position: absolute; border: solid 1px; } .ui-selected { background-color: blue; color: white; } javascript: $(".designer-panel-body").selectable( ); 如果选择了 div，如何在边框中添加小矩形，例如如何更改 ui-selected 样式以便将矩形添加到角上？背景和颜色变化在线条中不可见，因此需要其他东西将它们标记为选中。使用 Jquery、Jquery UI 和 Bootstrap 5。 CSS/Javascript 中的答案：在角上用小矩形标记单击的形状为此使用了大量 javacript。可以用 CSS 完成吗？ var element = document.getElementById("element"); var burchaklar = document.querySelectorAll(".burchak"); var x, y, width, height; burchaklar.forEach(function (burchak) { burchak.addEventListener("mousedown", function (e) { e.preventDefault(); x = e.clientX; y = e.clientY; width = parseInt( document.defaultView.getComputedStyle(element).width, 10 ); height = parseInt( document.defaultView.getComputedStyle(element).height, 10 ); document.addEventListener("mousemove", surish); document.addEventListener("mouseup", function () { document.removeEventListener("mousemove", surish); }); }); }); function surish(e) { var dx = e.clientX - x; var dy = e.clientY - y; switch (event.target.id) { case "top-left": element.style.width = width - dx + "px"; element.style.height = height - dy + "px"; element.style.top = y + dy + "px"; element.style.left = x + dx + "px"; break; case "top-right": element.style.width = width + dx + "px"; element.style.height = height - dy + "px"; element.style.top = y + dy + "px"; break; case "bottom-left": element.style.width = width - dx + "px"; element.style.height = height + dy + "px"; element.style.left = x + dx + "px"; break; case "bottom-right": element.style.width = width + dx + "px"; element.style.height = height + dy + "px"; break; } }.element { position: relative; width: 200px; height: 150px; background-color: lightblue; border: 2px solid darkblue; } .burchak { position: absolute; width: 10px; height: 10px; background-color: red; cursor: nwse-resize; /* Chekkaga o'tish imkonini berish */ } #top-left { top: -5px; left: -5px; } #top-right { top: -5px; right: -5px; cursor: nesw-resize; /* Chekkaga o'tish imkonini berish */ } #bottom-left { bottom: -5px; left: -5px; cursor: nesw-resize; /* Chekkaga o'tish imkonini berish */ } #bottom-right { bottom: -5px; right: -5px; cursor: nwse-resize; /* Chekkaga o'tish imkonini berish */ }<div class="element" id="element"> <div class="burchak" id="top-left"></div> <div class="burchak" id="top-right"></div> <div class="burchak" id="bottom-left"></div> <div class="burchak" id="bottom-right"></div>  </div>

html css twitter-bootstrap jquery-ui-selectable

回答 1 投票 0

如何通过 Bootstrap 在导航栏上使用下拉菜单？

它是ASP.NET核心应用程序我正在使用通过库管理器安装的 Bootstrap 5 - 根据文档引用了必要的引导文件它是 ASP.NET 核心应用程序我使用的是通过库管理器安装的 Bootstrap 5 -根据文档引用了必要的引导文件 <environment include="Development"> <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/lib/jquery/jquery.js"></script> <script src="~/lib/jquery-validate/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js</script> <script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js"></script> <script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script> </environment> 导航栏位于 _Layout.cshtml 文件中，其中有一个导航项列表，我希望其中一个是下拉菜单 <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Manage </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListUsers">Users</a> </li> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListRoles">Roles</a> </li> </ul> </li> -导航链接显示在浏览器上，但不可点击，并且不显示下拉项。任何帮助将不胜感激，谢谢。您的 html 代码工作正常，请确保添加正确版本的引导程序（打开 wwwroot\lib\bootstrap\dist\css\bootstrap.css 和 wwwroot\lib\bootstrap\dist\js\bootstrap.js 文件时检查文件的顶行）。或者你可以使用cdnjs参考，整个html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - TestMVC</title> @* <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> *@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">TestMVC</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Manage </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListUsers">Users</a> </li> <li> <a class="dropdown-item" asp-controller="Administration" asp-action="ListRoles">Roles</a> </li> </ul> </li> </ul> </div> </div> </nav> </header> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> </div> <footer class="border-top footer text-muted"> <div class="container"> © 2023 - TestMVC - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </div> </footer> <script src="~/lib/jquery/dist/jquery.min.js"></script> @* <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> *@ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="~/js/site.js" asp-append-version="true"></script> @await RenderSectionAsync("Scripts", required: false) </body> </html> 结果显示：

twitter-bootstrap asp.net-core

回答 1 投票 0

导航栏上的下拉菜单不起作用。修复吗？

我在尝试让下拉菜单正常工作时遇到了一些麻烦。我能够完美地设置导航栏，但是一旦我尝试执行某些操作或使用下拉菜单，它就根本不起作用。任何人...

html twitter-bootstrap bootstrap-5

回答 1 投票 0

如何在视频开始前的 <iframe></iframe> 标签中添加海报图像？

需要在网站中创建一个直播页面，当没有视频流时，视频窗口中可能会出现海报，直到视频显示为止。将不胜感激所有的帮助我...

javascript jquery html twitter-bootstrap iframe

回答 2 投票 0

如何使用 Turbolinks 扩展 Bootstrap 导航栏

在我的 Rails 4 应用程序中，我使用 Bootstrap 的导航栏。当导航栏折叠时，单击它时它并不总是展开/切换。菜单图标显示，但是当您单击它时，它不起作用