Bootstrap - 更改断点导航栏?
Posted
技术标签:
【中文标题】Bootstrap - 更改断点导航栏?【英文标题】:Bootstrap - Change breakpoint navbar? 【发布时间】:2016-07-24 03:57:01 【问题描述】:这个问题已经被问过here,但由于 javascript,这不起作用。因此,在提供的答案中,仅更改了 CSS,但未更改 JS,这意味着导航栏的内容仍然可见,而切换器不可见。有什么解决办法吗?
编辑:
我的问题是如何更改 Bootstrap 4.xx 中导航栏的断点
【问题讨论】:
另一个问题是关于在导航栏折叠后垂直堆叠项目,而不是导航栏折叠断点。 【参考方案1】:引导 5.0
Bootstrap 5 仍然使用navbar-expand*
类来确定导航栏的折叠断点。现在多了一个 navbar-expand-xxl 类。
Bootstrap 5 - Navbar Tiers
引导 4.0.0
在 Bootstrap 4 中使用 navbar-expand-*
类更容易更改导航栏断点。如果您排除navbar-expand-*
,则移动菜单将以all
宽度使用。这是所有 6 个导航栏状态的演示:Bootstrap 4 - Navbar Tiers
另见: Change bootstrap navbar collapse breakpoint without using LESS
【讨论】:
感谢您的回答,这完成了工作。我必须更正以下类的 CSS:“.navbar-nav .navbar-toggleable-xs.collapse”。【参考方案2】:Bootstrap 提供了一种使用菜单的简单方法。您可以根据需要使用navbar-expand-xl
、navbar-expand-lg
、navbar-expand-md
等。
谢谢
【讨论】:
【参考方案3】:(Bootstrap 4 Beta 兼容)如果您想要自定义断点,您可以使用我自己网站上的这个 sn-p。我复制了一个已定义的断点并对其进行了修改以满足我的需要。我遇到了菜单不符合品牌的问题,但我通过覆盖 flex-wrap 选项解决了这个问题。要实现,只需添加到另一个 CSS 文件或内联。代码:
@media (max-width:1070px).navbar-expand-srset>.container,.navbar-expand-srset>.container-fluidpadding-right:0;padding-left:0@media (min-width:1071px).navbar-expand-srset-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start.navbar-expand-srset .navbar-nav-ms-flex-direction:row;flex-direction:row.navbar-expand-srset .navbar-nav .dropdown-menuposition:absolute.navbar-expand-srset .navbar-nav .dropdown-menu-rightright:0;left:auto.navbar-expand-srset .navbar-nav .nav-linkpadding-right:.5rem;padding-left:.5rem.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid-ms-flex-wrap:nowrap;flex-wrap:nowrap.navbar-expand-srset .navbar-collapsedisplay:-ms-flexbox!important;display:flex!important.navbar-expand-srset .navbar-togglerdisplay:none.navbarflex-wrap:nowrap!important;-ms-flex-wrap:nowrap!important;
【讨论】:
【参考方案4】:我在原生 CSS 中覆盖了 .navbar-expand-lg。
示例代码如下:
@media (min-width: *desired break point here)
.navbar-expand-lg
-ms-flex-flow: row nowrap !important;
flex-flow: row nowrap !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
.navbar-expand-lg .navbar-nav
-ms-flex-direction: row !important;
flex-direction: row !important;
.navbar-expand-lg .navbar-nav .dropdown-menu
position: absolute !important;
.navbar-expand-lg .navbar-nav .nav-link
padding-right: 0.5rem !important;
padding-left: 0.5rem !important;
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
.navbar-expand-lg .navbar-collapse
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
.navbar-expand-lg .navbar-toggler
display: none !important;
【讨论】:
以上是关于Bootstrap - 更改断点导航栏?的主要内容,如果未能解决你的问题,请参考以下文章
css 更改导航栏响应断点。来自https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
使用 webpack 更改 react-bootstrap 导航栏的文本颜色