Question

我正在尝试在导航栏上方插入图片，但我不能为我工作。这是我的HTML：

  <div class="wrapper" />
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
          <li class="active">
            <a class="brand" href="#">Home</a>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

和我的css：

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 250px;
}

无论何时添加div或任何内容，都会将其推送到页面顶部。我可以添加填充，但是当我开始调整屏幕大小时，它会断开并在图像和导航栏中留下间隙。任何帮助都会很棒。

Answer 1

问题在/>末尾为.wrapper，因为不允许（取决于您的doctype）。删除它并像其他div一样给它</div>，我认为它会起作用。

Answer 2

<div />表示HTML 5中的<div>，而不是{X}中的<div></div>。 Div不是有效的自闭标签。

Ref

Demo

<div class="wrapper"></div>
<div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
          <li class="active">
            <a class="brand" href="#">Home</a>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

在Bootstrap导航栏上方添加全宽图像

2 个答案: