引导程序中的分层标头结构答案

【问题标题】：Layered header structure in bootstrap引导程序中的分层标头结构
【发布时间】：2014-11-20 17:23:25
【问题描述】：

我正在尝试在引导程序中创建分层标题。最底层的背景图片，标题在背景图片的顶部（始终居中），徽标也在背景图片的顶部（始终在右上角），标语在背景顶部图像也是（始终右对齐），并且引号位于背景图像的顶部（居中对齐）。标题、标志、标语和引语都可以在同一层，但都在背景图像的顶部。

如何构造行以分层显示？

查看插图链接。 http://varsang.com/header.jpg

蓝色是背景图片。希望保持相同的格式，但在屏幕尺寸变小时时全部响应。

【问题讨论】：

请做一个工作小提琴，到目前为止你做了什么？

标签： twitter-bootstrap header nested layer

【解决方案1】：

你真的应该努力，至少展示你迄今为止尝试过的代码。

这是一个非常简单的问题，所以你去吧。

简单地创建你的“容器>行>列”结构，但在你的元素周围放置另一个div，并使你的图像成为该元素的背景图像。简单。

我没有复制您想要的行/列结构，因为我假设您知道如何根据 Bootstrap 文档的要求使用不同的列大小来实现不同的屏幕尺寸。

<div class="my-background">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                YOUR CONTENT
            </div>
        </div>
    </div>
</div>

【讨论】：