HTML / Bootstrap-媒体查询问题

2024-05-21 • 问答

在我的项目中，我使用引导程序实现了一个导航栏，并且在该导航栏中有div。该div包含我想要在导航栏中显示的所有图像。我的目标是使该导航栏具有响应能力。

我使用媒体查询来检查屏幕是否为特定大小，如果是，我的目标是移动div的位置。但是，当我重新缩放屏幕时，div不会移动位置。

这是我的代码：

 <nav class="my-2 my-md-0 mr-md-3">
          <div class="navItems" style="position: relative; left: 470px;">
             <img src="{% static 'instaicon.png' %}" style="position: absolute; left: -60px; top: 10px;" width="25px" height="25px">
             <img src="{% static 'line007.png' %}" style="position: absolute; top: -23px; left: -70px;" width="110px" height="120px">
             <img src="{% static 'instatext.png' %}" width="110px" height="45px">
          </div>
 </nav>

CSS媒体查询：

  @media screen and (max-width: 1200px) {
    .navItems {
      position: absolute;
      left: 3px;
    }
  }

有人知道这个问题吗？谢谢。

首先，删除内联样式。它们导致这种事情发生。这里发生的是，内联样式始终会覆盖外部样式表。

您也绝对要在导航栏中定位项目，您不想这样做（我想）。您可以使用flexbox自动将这些项目隔开。

尝试以下HTML和CSS：

HTML

 <nav class="my-2 my-md-0 mr-md-3">
          <div class="navItems">
             <img src="{% static 'instaicon.png' %}" id="img1" width="25px" height="25px">
             <img src="{% static 'line007.png' %}" id="img2" width="110px" height="120px">
             <img src="{% static 'instatext.png' %}" width="110px" height="45px">
          </div>
 </nav>

CSS

@media screen and (max-width: 1200px) {
    nav .navItems {
      /*No need to state the same position again. The default style will add that*/
      left: 3px;
    }
  }

/*The styles below act as the default style*/
.navItems {
      position: absolute;
      left: 470px;
      display: flex;
      justify-content: space-between;/*Or maybe use 'center' instead*/
    }

如果需要，您可以使用我添加的图像ID在外部样式表中添加一些margin-top。如我所见，您之前添加了一些top。

HTML / Bootstrap-媒体查询问题

springhcd 回答：HTML / Bootstrap-媒体查询问题

大家都在问