html - CSS 样式不正确 - 不起作用(奇怪)

Question

我什至不知道从哪里开始。当我将大小时调整到 1600 像素以下时，即使它有适当的媒体查询来调整/隐藏/移动元素，网站也会中断 100%。但是为了查明一个我没有想到的问题，我在一个 id 中有一个 Logo ，它的高度设置为 175 像素，宽度设置为自动。在任何浏览器尺寸下，它的高度始终为 564px。查看下面的一些代码:

img #fpa-logo {
  bottom: -25px;
  height: 175px;
  margin-left: 12.5%;
  position: absolute;
  width: auto;
}

<div class="row">
  <div class="col-sm-12 nav" id="nav-w-back">
    <div class="col-sm-5 fLeft">
      <a href="http://www.fpacny.com"><img src="../images/FPA-logo-new150-02.png" alt="FPA Logo" id="fpa-logo"></a>
    </div>
    <div class="col-sm-7">
      <ul class="nav fRight" id="nav-ul">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services<span style="font-size: .75em"> &#9660;</span></a>
          <ul>
            <li><a href="#">Personalized Care</a></li>
            <li><a href="#">Health Care Services</a></li>
          </ul>
        </li>
        <li><a href="#">Links<span style="font-size: .75em"> &#9660;</span></a>
          <ul>
            <li><a href="#">Patient Information and Forms</a></li>
            <li><a href="#">Patient Friendly Sites</a></li>
          </ul>
        </li>
        <li><a href="#">Staff Bios</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

    </div>
  </div>
</div>

如果您对更多代码感兴趣 - 测试站点是:http://fpacny.com/index_test.php在这里你可以调整大小等。此时你可能会注意到主图像背景只有在添加内联 HTML 样式时才会正确调整大小:

style="height: auto; width: 100%;"

已添加。否则，那也会中断。

为什么我的链接 CSS 不会覆盖它？我开发的任何网站都从未遇到过这个问题，这让我非常抓狂!

JSFiddle:https://jsfiddle.net/hjo8pLxe/

Answer 1

你需要写

img#fpa-logo

定位 Logo 。

编辑:刚刚看到您正在使用 bootstrap 4:为什么不在图像上使用“img-fluid”类？如果行/列变小，它就不会变得太大并自动缩小。

<img class="img-fluid" {...} >

或者您是否需要任何特殊行为，而不是自动调整大小？

而且您还应该更多地了解 bootstrap 的列功能，您在 css 中使用了很多 position: absolute ，这对于您的设计来说根本不需要，并且会阻止很多如果您改用 Bootstrap ，则会出错。