Question

因此，这是我使用引导程序4建立的网站。我对徽标有很大的疑问，因为它在所有设备上都保持相同大小。

我尝试添加img-fluid，但是如果添加此类，徽标在手机上的缩小幅度很大，看起来像一个小点。所以我删除了该课程。现在，在移动设备上，汉堡包在导航栏的第二行和第一行移动，是310 px徽标，甚至无法完全显示。我现在想保持导航栏元素之间的间距，但是我认为问题可能实际上出在我的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元素之间的间距，当我缩小页面直到它变成汉堡包为止。但是，是否有办法保持导航栏元素的间距，该间距也可以调整大小？还是有解决此问题的另一种方法？谢谢！

Answer 1

最好的选择是为不同的视口尺寸创建不同的图像文件。使用srcset属性，您可以选择在这种情况下应显示的图像。

这里有个例子：

<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="my company">

在显示图像时，输入图像文件的名称/位置，后跟一个空格和查看端口的大小。它描述了图像应显示到的宽度（这就是w的宽度）。上面的示例翻译为：

显示small.jpg直到观察端口宽度为320px
显示medium.jpg直到观察端口宽度为600px
显示large.jpg直到观察端口宽度为900px

更详细的信息可以在这里找到：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

可以通过brooksrelyt的回答信息来定位位置

Answer 2

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

这将允许您使用我添加的名为.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>

Answer 3

我使用图像的 vw单位宽度解决了此问题。这样可以根据视口宽度保留元素的长宽比

.navbar-brand img {
max-width: 11vw; /* find suitable value for you */
display: block;
width: 100%;

}

有没有办法使导航栏徽标具有响应性？

3 个答案: