HTML CSS,Bootstrap响应DIV高度

Question

美好的一天,

我试图在Bootstrap框架的帮助下制作我的第一个响应式布局.

作为基本布局,我采用了一个示例模板,现在我正在尝试修改此模板.

我添加了以下内容:

    <div class="row col-xs-12 col-md-6 border1" id="HeadBar">
        This is not showing up
    </div>

在这里,我想放置页面标题(徽标和公司标题)

我的CSS代码:

#HeadBar {
    background-color: #ffffff;
    height: 10%;
    width: 100%;
    position: relative;
    display: block;
}
#HeadBar h1 {
    margin: 0px;
    padding: 10px;
}

问题是...... #HeadBar根本没有显示出来.更不用说回应了.

添加H1标签确实可以看到它.但是我想让它在没有任何附加物的情况下可见.

我希望任何人都能看到我的错误.我知道这是非常基本的.但我需要掌握它

https://jsfiddle.net/ferencik/zb50wgve/

Answer 1

仍然需要一些添加，例如添加z-index:1001（或任何超过 1000 的值，因为你navbar-static-top的导航中有类 - 它有z-index:1000- 与你的 重叠#HeadBar）#HeadBar

#HeadBar {
    background-color: #FFF;
    width: 100%;
    position: relative;
    display: block;
    height: 10%;
    z-index: 1001;
}