有没有办法使导航栏徽标具有响应性? [英] Is there a way to make navbar logo responsive?

问题描述

因此，这是我使用Bootstrap 4建立的网站. 我对徽标有很大的疑问，因为它在所有设备上都保持相同的尺寸.

So, here is the website I've built using bootstrap 4. I have a big issue with the logo, as it keeps the same size on all devices.

我曾尝试添加img-fluid，但是如果添加此类，徽标在手机上的缩小幅度很大，看起来像一个小点.因此，我删除了该课程.现在，在移动设备上，汉堡包在导航栏的第二行和第一行移动，是310 px的徽标，甚至没有完整显示.我现在想保持导航栏元素之间的间距，但是我认为问题可能实际上出在我的CSS上:

I've tried adding img-fluid, but if I add this class, the logo shrinks so much on mobile phones, that it looks like a tiny dot. So I've removed this class. Now, on mobile, the hamburger moved on the second line and on the first line of the navbar is the 310 px logo that doesn't even show completly. I want to keep this spacing between the navbar elements as it now, but I think the problem that may be actually comes from my 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>

填充的200px也保持不变，也许这就是为什么我遇到了所有这个问题.我不知道.以及li元素之间的间距，当我缩小页面直到它变成汉堡包为止.但是，是否有办法保持导航栏元素的间距，该间距也可以调整大小?还是有解决此问题的另一种方法?谢谢！

That 200px from padding also keeps the same, and maybe this is why I get all this issue. I am not sure. Also the space between the li elements, as I shrink the page until the point it becomes hamburger. But is there a way to still keep this spacing for my navbar elements, that also resizes? Or is there another way to fix this? Thank you!

推荐答案

我将所有内容都移动到了container中，因此您不必使用200px填充来移动徽标.这样一来，导航的位置就类似于代码中的尺寸/外观，而无需强制元素的位置.

I moved everything into a container so that you do not have to use 200px padding to move your logo. This lets the navigation sit similarly to the dimensions/look you had in your code without forcing the position of the elements.

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

This will let allow you to position your nav items to the right using a css class I added called .navbar-right.

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

But, because of the new positioning I added another media query to move the hamburger menu. (You may not need this in your coding environment because I was working straight off my desktop with just the CSS, also JS is not added to the example.)

希望这会有所帮助.

.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>

这篇关于有没有办法使导航栏徽标具有响应性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！