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

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

Answer 2

<div />意味着<div>在 HTML 5 中，而不是<div></div>在 XHTML 中。 Div's 不是有效的自闭合标签。

参考

演示

<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>