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

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

<div />表示 <div>在 HTML 5 而不是 <div></div>就像在 XHTML 中一样。 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>