javascript - 带有 uikit css 框架的响应式导航栏

Question

此代码是使用 UIkit css 框架为导航栏编写的。当从响应模式切换到桌面模式时，导航栏和内容部分之间会出现一个额外的空间。此外，我注意到只保留一个单词的导航菜单项会删除那些额外的空格。

删除导航栏和内容之间多余空白的最佳方法是什么。

Js fiddle Link

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-card uk-card-default " style="z-index: 980;" uk-sticky="bottom: #offset">
  <div class="uk-container uk-container-expand uk-box-shadow-medium" id="nav-wrapper">
    <nav class="uk-navbar-container" uk-navbar id="navbar">
      <div class="uk-navbar-left">
        <a class="uk-navbar-toggle uk-hidden@l" href="#" uk-toggle="target: #offcanvas-nav">
                    <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left"></span>
                </a>

        <a class="uk-navbar-item uk-logo" href="#"><img src="{{asset('img/logo.png')}}" alt=""></a>
        <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="/">item1</a></li>
          <li><a href="/about">item2</a></li>

           <li><a href="/about">item3</a></li>
          <li><a href="/about">item4</a></li>
           <li><a href="/about">item5</a></li>
           <li><a href="/about">item6</a></li>
           <li><a href="/about">item7</a></li>
           <li><a href="/about">item8</a></li>
          
        </ul>
      </div>
    </nav>

  </div>
</div>
<div class="uk-offcanvas-content">
  <div id="offcanvas-nav" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">

      <ul class="uk-nav uk-nav-default">
       <li class="uk-active"><a href="/">item1</a></li>
          <li><a href="/about">item2</a></li>

           <li><a href="/about">item3</a></li>
          <li><a href="/about">item4</a></li>
           <li><a href="/about">item5</a></li>
           <li><a href="/about">item6</a></li>
           <li><a href="/about">item7</a></li>
           <li><a href="/about">item8</a></li>
      </ul>
    </div>
  </div>

</div>
<section class="uk-container-expand">
  <div class="uk-height-large  uk-background-cover uk-light uk-flex uk-flex-center uk-flex-middle " data-src="https://source.unsplash.com/1200x800/?camera" uk-img>
    <h2>Background image</h2>

  </div>
</section>
<section class="uk-container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet recusandae ex accusantium quaerat, dolore ducimus inventore fugiat perspiciatis iusto ut quidem? Quod eaque libero cumque dolor quidem nam ipsa a. Facere minima id odit aspernatur laboriosam, impedit repellat a nam, atque molestias ut? Culpa delectus et labore aliquid corporis animi ad, voluptatibus rerum in molestiae quo pariatur quos consectetur fugiat debitis accusantium iste iure quidem obcaecati provident qui similique sapiente cum. Suscipit aliquam labore dignissimos, quas corrupti laboriosam deserunt quaerat molestias assumenda magnam, est ullam nemo non quasi odio id fugit ab consectetur praesentium tempore reiciendis dolorum. Voluptatibus quisquam est sed? Facere culpa asperiores aperiam officia, totam fugiat optio! Hic explicabo fuga ab molestias, blanditiis labore expedita dolore optio voluptas corrupti reprehenderit soluta incidunt odio dolorum ullam, illum quae saepe laudantium, minus rerum similique debitis velit. Exercitationem sit incidunt quia repellendus. Culpa esse ducimus aliquid nemo, nihil excepturi corrupti odio eum officiis temporibus molestiae laborum velit doloribus asperiores autem. Eos commodi neque illo repellendus nesciunt voluptates, velit, repellat eligendi et temporibus odit autem numquam reprehenderit alias cumque modi, aliquam vitae a! Pariatur, provident quod, nihil ipsa eos quam nemo accusantium perspiciatis vero fugit iusto perferendis obcaecati, sequi ad ullam totam?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam modi explicabo repudiandae iste adipisci incidunt quis, quasi labore officiis atque praesentium esse dolorem vero rerum eos sequi aliquid, tenetur quas ipsum. At inventore sed unde sint qui vero nostrum ipsum reprehenderit porro, maiores, sequi eum hic, assumenda laudantium magnam possimus expedita eaque quisquam suscipit? Corrupti, laborum quibusdam sapiente natus nobis aliquam repellat, animi ex nulla ratione doloremque praesentium sint minus rem asperiores? Alias rem possimus iure natus pariatur suscipit reiciendis culpa nisi veniam, ipsum repellat, ipsa impedit veritatis rerum amet voluptatem iste, adipisci quo perferendis neque. Obcaecati nam beatae saepe non ex inventore sequi! Provident ad sint repudiandae quis adipisci earum. Facilis optio voluptatibus quam deserunt fugit aliquam culpa labore voluptatem ullam maiores dolorem commodi repellat architecto iste, autem omnis nihil sint sit blanditiis quidem esse! Itaque tempora obcaecati architecto placeat in ea illo earum reprehenderit nemo, voluptas aliquid fuga facere. Harum sit et numquam explicabo, quo similique provident doloremque vero nemo quos molestiae velit ullam est unde tempore ratione optio minus quod tempora facere, dolorem tenetur obcaecati iste ipsum. Fuga fugiat, corrupti doloremque fugit, debitis reprehenderit dicta a veniam enim ut cumque rem? Qui officia quaerat debitis consequuntur, sequi sapiente odit necessitatibus. Delectus autem, repellendus dolorum, maxime placeat modi, error laboriosam doloremque odio vitae consectetur quam doloribus magni quaerat sapiente maiores? Recusandae esse minus, accusantium aut sunt rem veniam sit, expedita quia optio ad quod ea? Maxime, consectetur eos quos fugiat, ducimus aliquid reiciendis corporis delectus nisi illo quibusdam laboriosam architecto doloremque necessitatibus officia sed et dolores totam nam similique asperiores esse dolore vel! Ullam esse repudiandae cum a voluptatem! Eum cumque aut error soluta odio ea in sit obcaecati nulla, dignissimos eos hic autem! Et deleniti consequuntur perspiciatis provident id temporibus ducimus quibusdam adipisci, numquam ab. Repellat quidem tempore eveniet distinctio omnis quibusdam sint, minus illo architecto! Quos nihil illum quisquam, assumenda consectetur eius numquam distinctio voluptate, cupiditate, in optio accusamus! Soluta esse tempore repellat delectus doloribus pariatur quis cumque, dolor aliquam sit modi similique neque ad consectetur eum impedit cum distinctio laboriosam libero asperiores adipisci! Quo, velit. Dignissimos officia vel doloribus laborum saepe molestiae odio perferendis itaque voluptatibus sapiente repudiandae, animi distinctio illum possimus sequi dolorem molestias ratione mollitia quam ipsa fuga facere non tenetur sint! Eum quod beatae dicta sint dolorem soluta modi distinctio? Autem eaque eius sapiente odit ex deserunt. Magnam quaerat modi tenetur sed!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo est id, facilis nesciunt facere ducimus praesentium. Eos, et error excepturi est illo ratione reiciendis tenetur ea nobis doloribus sunt temporibus placeat fuga perspiciatis voluptas, minus, deserunt officia? Iusto laboriosam quos rem, velit quam neque maxime dolorum ullam sapiente laudantium ipsum fugit tempore, ab illo, nesciunt veritatis aspernatur. Voluptates maxime, esse ipsam libero exercitationem odit! Tenetur reprehenderit ex adipisci esse! Ad natus fugiat rem tempora dignissimos vel animi nisi, eos libero. Beatae dolore, architecto quo veniam obcaecati quia reiciendis adipisci, enim repellendus eum quis voluptatem modi. Provident voluptate aliquid expedita dolorum quibusdam, mollitia quo magni? Dicta, provident reprehenderit. Delectus qui, debitis iure voluptas dicta tempora at laudantium eaque fugiat repellat reiciendis dignissimos. Sit reiciendis ducimus corporis quis quo quod aperiam explicabo laborum dignissimos error totam beatae est ipsa, maxime repellat a amet, animi esse ex dolorum? Tempora magnam nemo cupiditate, consectetur adipisci non blanditiis laudantium beatae esse, obcaecati aspernatur ex, quidem dolor voluptatem! Quasi maiores, placeat commodi ipsam laboriosam esse aspernatur ex eaque saepe porro possimus animi consequatur. Ex dicta dolorem aut! Veniam non dolorem, quas delectus totam ex sit maiores, mollitia dicta rem obcaecati ratione repellat quae quod facere consequuntur?</p>
</section>

Answer 1

额外的空间应该是在所有分辨率下都可见的图标或 Logo 。我认为额外的空间实际上出现是因为桌面菜单以响应分辨率显示而不是被删除，然后“汉堡包”菜单正在并且应该被使用。