时间戳

首页 > 解决方案 > 尽管在桌面上，导航栏仍会自动进入移动模式

css - 尽管在桌面上，导航栏仍会自动进入移动模式

问题描述

我已经很久没有编写代码了，我正面临一个让我发疯的问题，因为我什至无法开始做任何事情。我正在我的网站的基础上工作，当我尝试我的页面时，导航栏会在我使用桌面时自动进入移动模式。

我在 Chrome 和 Firefox 上尝试了相同的结果：全尺寸页面上缩小的导航栏（它甚至无法正常工作，因为它不是很好的尺寸）。减小窗口的大小将使移动导航栏正常工作，但无法获得正常的导航栏。我从 Codepen 尝试了不同风格的导航栏，看看我的代码是否错误但同样的问题。我什至尝试使用 Bootstrap 3 而不是 4，代码变得更糟。例如，这个是错误的：https ://codepen.io/mmgolden/pen/JNewdL

HTML头：

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">

  <script src="assets/js/jquery-3.4.1.min.js"></script>
  <script src="assets/js/bootstrap.js"></script>

  <link href="assets/css/style.css" rel="stylesheet" type="text/css">

HTML正文：

<body>

     <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="nav-left">
      <ul class="nav navbar-nav">
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
      </ul>
    </div>

    <a class="navbar-brand mx-auto" href="#"><div id="logo"></div></a>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
        <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>

    <!-- Mobile -->
    <div class="collapse" id="navbarMobile">
        <ul class="nav navbar-nav">
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
                <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
                <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
        </ul>
    </div>
</nav>
<div class="slider">
</div>
</body>

CSS：

       .slider {
         background: #333;
         height: 400px;
         width: 100%;
         }

#logo {
  background: #ccc;
  width: 150px;
  height: 70px;
}

.navbar-toggler {
  margin-top: 15px;
}

@media screen and (min-width: 992px) {
  .navbar {
      height: 130px;
   }
  #logo {
    width: 260px;
    height: 120px;
    position: relative;
    bottom: -20px;
  }
  .navbar-light .navbar-nav .nav-link {
    padding-right: 75px;
  }
  #nav-left {
    padding-left: 30px;
  }
}

截图：https ://ibb.co/KDFqfTH 我需要它在桌面上正常显示并在移动/平板电脑上缩小。谢谢你的时间。

标签： cssbootstrap-4navbar

解决方案

推荐阅读