twitter-bootstrap Bootstrap 3 的无响应导航栏

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18901333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:29:14  来源:igfitidea点击:

Non-responsive navbar with Bootstrap 3

twitter-bootstraptwitter-bootstrap-3

提问by Fred K

This is the paragraph from Bootstrap 3 documentation about disabling responsivnessfor a navbar:

这是 Bootstrap 3 文档中关于禁用导航栏响应的段落:

If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).

如果使用导航栏,请撤消所有导航栏的折叠和展开行为(此处无法显示太多内容,请查看示例)。

I really can't get how to disable responsivness. Also, from the non-responsive exampleI can't understand much more. Someone has already do that?

我真的不知道如何禁用响应性。另外,从无响应的示例中,我无法理解更多。有人已经这样做了吗?

采纳答案by Bass Jobsen

Check this: https://github.com/bassjobsen/non-responsive-tb3and also read https://github.com/twbs/bootstrap/issues/10371.

检查这个:https: //github.com/bassjobsen/non-responsive-tb3并阅读https://github.com/twbs/bootstrap/issues/10371

You can do this by setting the @grid-float-breakpoint to 0 in your variables.less. And recompile bootstrap.

您可以通过在 variables.less 中将 @grid-float-breakpoint 设置为 0 来完成此操作。并重新编译引导程序。

updateAs mentioned in the comments by @fred-kthe above did not make the navbar dropdowns non-responsive. To fix this you will have to set @screen-xs-max in navbar.less to 0 too. This issue will be fixed in future releases, see https://github.com/twbs/bootstrap/pull/10465

更新正如@fred-k在评论中提到的那样,上述内容并未使导航栏下拉菜单无响应。要解决此问题,您还必须将 navbar.less 中的 @screen-xs-max 也设置为 0。此问题将在未来版本中修复,请参阅https://github.com/twbs/bootstrap/pull/10465

Note @screen-xs-max in navbar.less also influence the Navbar forms

注意 navbar.less 中的 @screen-xs-max 也会影响 Navbar 形式

回答by Sean Ryan

Well, the key appears to be building a stylesheet that locks out all of the responsive stuff. Take a look at http://getbootstrap.com/examples/non-responsive/non-responsive.cssfor what they use to stop the page from being responsive. You could probably lift that entire sheet.

好吧,关键似乎是构建一个样式表,将所有响应式的东西都锁在外面。查看http://getbootstrap.com/examples/non-responsive/non-responsive.css了解他们用来阻止页面响应的内容。你可能可以举起整张纸。

Regarding the navbar specifically, there is nothing that you can do without having a sheet like the one linked in this answer. That being said, the one thing the example doesn't do that you probably should is rip out the menu icon that will show up when the navbar collapses. That would be this bit of code:

特别是关于导航栏,如果没有像本答案中链接的那样的工作表,您将无能为力。话虽如此,该示例没有做但您可能应该做的一件事是撕掉导航栏折叠时将显示的菜单图标。那将是这段代码:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>