html - 在使用 Bootstrap 粘性 header 时遇到问题

Question

我正在使用 Bootstrap 创建我的动画作品集，目前我的粘性 header 可以正常工作，但不知道如何解决它的两个问题。你可以看到一个工作示例 [here] .

• 将标题居中放置在内容 div 的正上方(现在它有一个小的偏移量)
• 将 header 缩放为始终占浏览器垂直尺寸的 10%
• (可选)希望内容 div 正好从标题停止的位置开始，这样就不会被截断

这是我的代码:

HTML

<div class="container">
<div class="affix affix-top header-resize" style="position: top; margin: 0 auto; clear: left; height: auto; z-index: 5; text-align: center; background-size: cover; background-color: clear;">
<div class="container" style="background-image: url('img/header-bg.png'); background-size: cover; height: auto;">
<img src="img/logo.png" class="col-xs-8" alt="Jesse J. Jones - Animator/Illustrator/Designer">
</div>
<div class="container" style="background-image: url('img/header-gradient.png'); background-repeat:repeat-x; background-size: cover; height: 20%;">
</div>
</div>
</div>

CSS

.header-resize {
  height: 10%;
}

感谢您的帮助!我对 Bootstrap 和响应式设计还很陌生，所以所有这些纯粹是我在试验和遵循教程。让我知道是否需要进一步解释! :)

谢谢，

杰西

Answer 1

您忘记添加 bootstrap 自己的 ROW div。这将使您的标题重新居中:

<div class="container">
    <div class="row">
        <div class="affix affix-top header-resize" style="position: top; margin: 0 auto; clear: left; height: auto; z-index: 5; text-align: center; background-size: cover; background-color: clear;">
            <div class="container" style="background-image: url('img/header-bg.png'); background-size: cover; height: auto;">
              <img src="img/logo.png" class="col-xs-8" alt="Jesse J. Jones - Animator/Illustrator/Designer">
            </div>
            <div class="container" style="background-image: url('img/header-gradient.png'); background-repeat:repeat-x; background-size: cover; height: 20%;"></div>
        </div>
     </div>
</div>