css - 如何绕过 Bootstrap 3 中的 768px 折叠阈值？

Question

我想知道是否有一种合法的方法可以防止导航栏在 768px 断点处折叠(即仅在智能手机视口(viewport)处折叠)。客户端突然需要离开标题 + 菜单，就像在平板电脑视口(viewport)大小的桌面 View 中一样。在发布这个问题之前，我已经浏览了许多博客和论坛，但找不到正确的答案。有些人建议在 LESS 文件中进行更改(不幸的是，我没有在我的元素中使用 LESS)。
预先感谢您提供所有可能的输入!

Answer 1

LESS 将是最简单的方法，但由于这不是一个选项，您可以在自己的样式表中覆盖默认的 Bootstrap CSS。

我建议使用 Chrome 的开发者工具之类的东西来确定导致导航栏崩溃的 CSS 规则。然后你只需要将它们放在 Bootstrap 的电话断点 (480px) 的媒体查询中。

例如:

@media (min-width: 480px) {
  .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
  }
  .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }
}