html - Bootstrap 4 navbar-expand-* 自定义断点不起作用

Question

我有一个这样定义的 Bootstrap 导航栏:

<div class="container-fluid bg-secondary">
  <nav class="navbar utep-nav  navbar-inverse navbar-expand-lg">

    <button class="ut-toggler navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                    <span class="navbar-toggler-icon"></span>
                </button>

    <div class="collapse navbar-collapse  " id="navbarSupportedContent">

      <ul class="navbar-nav bg-secondary">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Products</a>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
                                Products
                            </a>
            <div class="dropdown-menu bg-secondary">
              <a class="dropdown-item" href="#">Product 1</a>
              <a class="dropdown-item" href="#">Product 2</a>

            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
  </nav>
</div>

我已经覆盖了默认断点，如下所示:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1250px,
  xl: 1365px
) ;

我已经测试了自定义断点，它们似乎与 .d-block .d-*-none 一起正常工作。然而，“navbar-expand-lg”并没有像我预期的那样工作。导航栏仍在以 992px(默认 Bootstrap 值)而不是我上面定义的 1250px 扩展。

如何使导航栏以 1250 像素而不是默认的 992 像素展开？

谢谢

Answer 1

好的，我解决了。我把它留在这里以防其他人遇到这个问题。

我给变量添加了一个新的断点，如下:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  force-menu-break: 1249.9px, //This will be rounded to 1250 by most screens.
  lg: 1250px,
  xl: 1365px
) ;

然后，我将新类“navbar-expand-force-menu-break”添加到我的导航栏:

<nav class="navbar utep-nav  navbar-inverse navbar-expand-force-menu-break">

这是一种可行的解决方法。