Question

我在jumbotron（Bootstrap 3）中播放HTML5视频，效果非常好。这是它的HTML：

<div class="jumbotron" id="cover">
    <video id="video-background" preload autoplay>
        <source src="{% static 'videos/cover_video.mp4' %}" type="video/mp4" />
        Video cannot be played by your browser
    </video>
</div>

对应的CSS：

.jumbotron{
  position: fixed;
  z-index:-101;
  height: 100vh;
  width: 100%;
}

#video-background { 
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

我想在这个jumbotron视频下面添加一些内容，更具体地说，是一个Bootstrap“row”类div。当我尝试在.jumbotron div下面添加以下代码时，它出现在jumbotron视频上。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <h1>fjsfs</h1>
    </div>
    <div class="col-md-4">
      <h1>fjsfs</h1>
    </div>
    <div class="col-md-4">
      <h1>fjsfs</h1>
    </div>
  </div>
</div>

我已经查看了其他答案，例如this，但它对我不起作用。我确信它与.jumbotron类的position: fixed;属性有关，但它是全屏视频所必需的。

任何帮助将不胜感激！

Answer 1

您可以尝试将jumbotron元素放在其自己的列和行中吗？使用！important来覆盖它们时，显示和位置属性的失败。

希望这有帮助

在jumbotron

1 个答案: