Bootstrap 4 navbar-expand- * с пользовательскими точками останова не работает

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, как я определил выше.

Как сделать так, чтобы панель навигации расширялась до 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">

Это обходной путь, который работает.