html - 有没有办法让导航栏 Logo 响应？

Question

所以，这是我使用 bootstrap 4 构建的网站。 我对 Logo 有很大的疑问，因为它在所有设备上都保持相同的大小。

我试过添加 img-fluid，但是如果我添加这个类， Logo 在手机上会缩小很多，看起来像一个小点。所以我删除了这个类。现在，在移动设备上，汉堡包移动到第二行，导航栏的第一行是 310 像素的 Logo ，它甚至没有完全显示。我想像现在一样保持导航栏元素之间的间距，但我认为问题实际上可能来 self 的 css:

.navbar .navbar-brand {
padding: 5px 200px;
}


.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}

.navbar-nav>li {
margin-left: 5px;
margin-right: 5px;
}

这是我的 html:

<nav class="navbar navbar-light navbar-expand-xl fixed-top ">
    <!-- Brand/logo -->
    <a class="navbar-brand "> <img src="x" alt="logo" style="width: 310px"></a>
    <button class="navbar-toggler" data-target="#collapsingNavbarLg" data- toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbarLg">
        <!-- Links -->
        <ul class="navbar-nav float-right text-right pr-3">
            <li class="nav-item">
                <a class="nav-link py-0" href="/" style="font-size: 130%;">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="ChiSono" style="font-size:130%;">Chi Sono</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="Servizi" style="font-size:130%;">Servizi</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="Contattaci" style="font-size:130%;">Contattaci</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="AreaClienti" style="font-size:130%;"> Area Clienti</a>
            </li>
        </ul>
    </div>
</nav>

padding 的 200px 也保持不变，也许这就是我遇到所有这些问题的原因。我不知道。还有 li 元素之间的空间，因为我将页面缩小到它变成汉堡包的程度。但是有没有办法仍然为我的导航栏元素保持这个间距，它也会调整大小？还是有另一种方法来解决这个问题？谢谢!

Answer 1

我将所有内容都移到了 容器 中，这样您就不必使用 200 像素的填充来移动 Logo 。这让导航类似于您在代码中的尺寸/外观，而无需强制元素的位置。

这将允许您使用我添加的名为 .navbar-right 的 css 类将导航项定位到右侧。

但是，由于新的定位，我添加了另一个媒体查询来移动汉堡包菜单。 (在你的编码环境中你可能不需要这个，因为我直接在我的桌面上工作，只使用 CSS，而且 JS 也没有添加到示例中。)

希望这对您有所帮助。

.navbar-right {
  position: absolute;
  right: 0;
}

.relative {
  position: relative;
}

@media only screen and (max-width:768px) {
  .navbar-brand {
    max-width: 100px;
  }
  /* below is for the demo but might help you position 
  the hamburger menu on mobile */
  .navbar-toggler {
    right: 0;
    position: absolute;
    margin: 10px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container relative">
    <div class="row">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="http://www.studiopirrera.com/Images/ui.png" alt=" ">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav navbar-right">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>