Question

我试图在Navbar的左侧获得徽标以进行响应调整大小，我尝试了几种在这里找到的不同方法，但是我没有运气。任何帮助表示赞赏。

我目前有@media查询，但它们不起作用。我的代码； https://codepen.io/grabthereef/pen/WKVMEd

HTML

    <!--Nav -->
<nav class="navbar navbar-expand-md navbar-light fixed-top py-1">
  <div class="container">
    <a href="index.php" class="navbar-brand">
      <img class="img-fluid" src="img/ycal.png" alt="">
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="?page=why-choose-us" class="nav-link">Why Choose Us</a>
        </li>
        <li class="nav-item">
        <a href="?page=our-services" class="nav-link">Our Services</a>
        </li>
        <li class="nav-item">
        <a href="?page=remote-help" class="nav-link">Remote Help</a>
        </li>
        <li class="nav-item">
        <a href="?page=contact-us" class="nav-link">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar {
  box-shadow: 2px 2px 5px #3292a6;
  opacity: 0.9;
  background: #fff; }
.navbar .nav-item {
  font-size: 1.2rem;
  padding-right: 20px; }

 @media(max-width: 950px) {
  .ycal img {
    width: 264px;
    height: 68px;
  }
}

@media(max-width: 600px) {
  .ycal img {
    width: 264px;
    height: 68px;
  }
}

Answer 1

使用@media queries使您处在正确的轨道上。它们在您的示例中不起作用的唯一原因是您没有正确选择要调整大小的图像。

.ycal img在元素类别为.ycal的元素内选择一个图像标签，但是在您的情况下，该图像标签已经是您想要的图像。

因此更新选择器，它将正常工作：

@media(max-width: 950px) {
    .ycal {
        width: 264px;
        height: 68px;
    }
}

您还可以签出updated codepen。

具有媒体查询大小的Bootstrap Navbar Image徽标大小

1 个答案: