Question

我甚至不知道从哪里开始。当我调整大小低于1600px时，即使它有适当的媒体查询来调整大小/隐藏/移动元素，该网站也会突破100％。但是为了找出一个我不能解决的问题，我在id中设置了一个标识，其高度设置为175px，宽度设置为auto。在任何浏览器大小，它总是高达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

定位徽标。

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

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

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

你还应该仔细研究一下bootstrap的列功能，你在你的css中使用了很多position: absolute，这对你的设计根本不需要，如果你使用的话会防止很多错误引导而不是。

Answer 2

将您的ccs更改为

None

CSS没有正确的样式 - 不会工作（奇异）

2 个答案: