Question

我正在使用Bootstrap来创建我的动画组合，目前我的粘贴标题正在运行，但不知道如何修复它的两个问题。您可以看到一个有效的示例[here]。

将标题正好位于内容div的正上方（现在它的偏移量很小）
将标题缩放为始终占据浏览器垂直大小的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>

使用Bootstrap粘贴标头时遇到问题

1 个答案: