bootstrap 3 - 在手机上禁用导航栏切换堆叠答案

【问题标题】：bootstrap 3 - Disable navbar-toggle stacking on mobile phonesbootstrap 3 - 在手机上禁用导航栏切换堆叠
【发布时间】：2016-05-19 22:36:09
【问题描述】：

当通过手机访问页面时，如何在 Twitter Bootstrap 3 中禁用导航栏以将切换按钮堆叠到新行中？

我总是得到这样的东西：

_{（来源：toile-libre.org）}

我已经尝试了一切，从添加自定义 CSS 到修改 .less 文件，再到进一步重新编译整个 Bootstrap 样式（我一直在更改 @grid-float-breakpoint 变量，我什至玩过 navbar.less），但不幸的是我没有成功。

有人可以帮帮我吗？我很绝望，因为我已经浪费了一整天的时间来解决这个问题。

【问题讨论】：

请在Snippet 中发布您的代码 (HTML/CSS/JS) 的工作示例。见minimal reproducible example 和How to Ask。
您是否尝试过在您的 CSS 类上利用媒体查询来设置导航样式？ developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

尝试从菜单中删除折叠类，然后删除按钮：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

【讨论】：

【解决方案2】：

解决了，我必须将width 属性添加到右侧有这两个按钮的 div 容器中。 div 的大小调整不当，因此将第二个（切换）按钮放在新行中。

【讨论】：

【解决方案3】：

.navbar-toggle 具有属性float: right;。检查您的navbar 的 HTML 代码。切换按钮应首先放置在菜单的其他部分之前。

【讨论】：