如何防止 Bootstrap 3 中的导航栏崩溃？

防止 Bootstrap 3 中的导航栏折叠

在 Bootstrap 3 中，导航栏可以在较小的屏幕上折叠以节省空间。这在许多情况下都很有用，但如果您想禁用此行为并保持导航栏始终可见，请按以下方法操作。

自定义 CSS

至防止导航栏折叠，您需要覆盖一些默认的 CSS 属性。以下是必要更改的细分：

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

• .navbar-collapse.collapse 覆盖默认的 display 属性，该属性隐藏折叠的元素。相反，它将显示设置为 block，使其可见。
• .navbar-nav>li，.navbar-nav 强制左侧菜单项漂浮left.
• .navbar-nav.navbar-right:last-child 为最右侧的菜单项提供一些细微的边距调整。
• .navbar-right 确保右侧菜单浮动到正确。

实现

要实现这些更改，请将提供的 CSS 添加到样式表中。或者，您可以将样式直接内联到 HTML 代码中。

说明

这些 CSS 属性共同作用，使导航栏元素在所有屏幕尺寸上都可见。

• .navbar-collapse.collapse 属性会覆盖折叠
• .navbar-nav>li、.navbar-nav 和 .navbar-right 确保右侧菜单与左侧正确对齐菜单。

以上是如何防止 Bootstrap 3 中的导航栏崩溃？的详细内容。更多信息请关注PHP中文网其他相关文章！