Question

我有一个这样定义的引导导航栏：

<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（默认的引导程序值）展开，而不是我上面定义的1250px。

如何使导航栏扩展为1250px，而不是默认的992px？

谢谢

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">

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

具有自定义断点的Bootstrap 4 navbar-expand- *无法正常工作

1 个答案: