Question

我有一个带有固定顶部导航栏的bootstrap格式化页面。

我想要的是在导航上方设置一个全宽（固定高度）封面图像（可能响应......）。

我已经尝试了this，但封面只是没有显示。

UPDATE1： 导航栏显示在页面底部（如页脚）...不明白为什么......

这是我的HTML：

<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
           ...
           ...
           ...

Navbar CSS自定义和封面CSS：

body {
  min-height: 2000px;
  padding-top: 70px;
}

.navbar-brand,
.navbar-nav li a.main-bar{
    line-height: 70px;
    height: 70px;
    padding-top: 0;
}

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

.FlexEmbed:before {
  content: "";
  display: block;
  width: 100%;
}

.FlexEmbed--3by1:before {
  padding-bottom: 33.33333%;
}

先谢谢stackoverflow社区！

更新2：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>MySite</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/navbar-fixed-top.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  </head>

  <body>

    <div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>

   <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img style="max-width:70px; margin-top: 9px;" alt="IBA" src="#">
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#" id="home" class="main-bar">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle main-bar" data-toggle="dropdown" aria-expanded="false" id="Mydropdown">Mydropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#" id="element1">element1</a></li>
                <li class="divider"></li>
                <li><a href="#" id="element2">element2</a></li>
                <li><a href="#" id="element3">element3</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="element4" class="main-bar" style="color: #18b07d;">element4</a></li>
            <li><a href="#" id="element5" class="main-bar">element5</a></li>
            <li><a href="#" id="element6" class="main-bar">element6</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container" id="content"></div> // here I paste all the content via jQuery

  </body>
</html>

对我的问题提出fiddle。

Answer 1

我希望我能正确理解你的问题。一个选项是position您的背景fixed。通过添加width: 100%;和background-size: cover;，您可以完全覆盖它。

<强> 更新

要使其更像“Facebook封面图片”，请在图片中添加height，然后移除padding-top: 70px;上的body。然后你应该被设置。

.FlexEmbed {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
    background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

您还可以为.navbar-fixed-top添加一些保证金，以查看背景是否显示在顶部。

.navbar-fixed-top {
    top: 70px;
}

someone else has seen this

Answer 2

使用JsFiddle创建现场演示。

导航栏位于底部，因为您将图像显示为块;

我对你想要实现的目标不太确定，但是你试过z-index吗？

Bootstrap - 在导航栏上设置封面图像

2 个答案: