幻灯片侧边栏菜单和引导栏的宽度相等

Question

根据设计器项目，我有一个站点，该站点具有bootstrap 4 col-md-3（屏幕宽度的25％）和col-md-9布局。

项目还包含幻灯片侧边栏菜单，其宽度与col-md-3宽度一样（高于屏幕分辨率768px）。默认菜单也应打开。

我尝试获取实际的$(window).width()值并将其除以4以获取导航面板的宽度。

导航面板的宽度也应小于30像素（由于导航填充：http://prntscr.com/jxyawq），并与左col-md-3列相等。但这实际上并不相等，尽管控制台说应该（http://prntscr.com/jxy93a）。

任何人都知道为什么会这样吗？

感谢您的帮助。

JavaScript

if ( windowWidth >= 768 ) {

  //set width of the slided navigation to be equak with col-md-3 column width
  var nav_width = (windowWidth / 4) - 30;
  var left_column_width = $("#s-o-nas .left").width(); ///col-md-3 width
  console.log("left_column_width: " + left_column_width);

  $("#nav-cont nav").width(nav_width).css('max-width', nav_width + 30 + "px");
  console.log("navigation_panel_width: " + nav_width);

}

和html：

<div id="navigation" class="container-fluid animated bounceInDown">
  <div class="row">
    <div id="nav-cont">
        <div>
          <nav class="">
            <div>
              <span class="btn-close animated bounceInDown"><span></span></span>
            </div>
            <a class="navbar-brand no-margin no-padding" href="index.html">
              <img class="img-fluid animated bounceIn" src="img/restauracja-corleone-logo.png" alt="Restauracja Corleone logo">
            </a>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link animated zoomIn" href="#start">Start</a>
              </li>
              <li class="nav-item">
                <a class="nav-link animated zoomIn" href="#o-nas">O nas</a>
              </li>
              <li class="nav-item">
                <a class="nav-link animated zoomIn" href="#polecamy">Polecamy</a>
              </li>
              <li class="nav-item">
                <a class="nav-link animated zoomIn" href="#menu">Menu</a>
              </li>
              <li class="nav-item">
                <a class="nav-link animated zoomIn" href="#wina">Wina</a>
              </li>
              <li class="nav-item">
                <a class="nav-link animated zoomIn" href="#galeria">Galeria</a>
              </li>
              <li class="nav-item">
                <a class="nav-link animated zoomIn" href="#kontakt">Kontakt</a>
              </li>
            </ul>               
          </nav>
        </div>         
    </div>
  </div>
</div>