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有navbar-static-top类 - 它有z-index:1000 - 它与#HeadBar重叠） #HeadBar

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

Answer 2

添加z-index: 9999; 到了css。

小提琴

Answer 3

而不是使用z-index ，我建议修复您的position问题，这是问题的实际原因。

我也会从#headBar div中删除类.row 。 .row用于容器内的边距，不应在父容器本身上使用。

在.navbar ，我将position设置回initial position ，因为它始终固定在父级的顶部，而不是在前一个兄弟之下找到它的位置。

 /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { margin: 0px; padding: 0px; padding-bottom: 40px; color: #5a5a5a; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 0; right: 0; left: 0; z-index: 20; } /* Flip around the padding for proper display in narrow viewports */ .navbar-wrapper > .container { padding-right: 0; padding-left: 0; } .navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; position: initial; } .navbar-wrapper .navbar .container { width: auto; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { height: 500px; margin-bottom: 60px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { height: 500px; background-color: #777; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } /* MARKETING CONTENT -------------------------------------------------- */ /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { margin-bottom: 20px; text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; } /* Featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* Space out the Bootstrap <hr> more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 768px) { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 0px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } /* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; } /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } .featurette-heading { font-size: 50px; } } @media (min-width: 992px) { .featurette-heading { margin-top: 120px; } } #HeadBar { background-color: #ffffff; height: 10%; width: 100%; position: relative; display: block; } #HeadBar h1 { margin: 0px; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="navbar-wrapper"> <div class="container"> <div class="col-xs-12 col-md-6 border1" id="HeadBar"> This is not showing up </div> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> </div> </nav> </div> </div> 

• 的jsfiddle

Answer 4

首先，要解决这个问题的是你想要实现的目标？ 这个带文字的元素应该固定吗？ 静态的？

其次，具有类row的元素必须使用col-something-number包装元素

Thrid，如果导航是静态的，请不要破坏导航组件，只需在顶部添加div，请参阅此小提琴https://jsfiddle.net/6evtc3ry/

Answer 5

CSS

更改在类.navbar-wrapper .navbar添加属性

 float:left;
 width:100%

看小提琴https://jsfiddle.net/zb50wgve/4/

要么

结构变化

为#HeadBar添加.row的#HeadBar 。 并从#HeadBar删除类row

码：

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

请参阅小提琴： https ： //jsfiddle.net/zb50wgve/5/

Answer 6

使用bootstrap，你必须将行DIV与col -...分开，如下所示：

 <div class="row" id="HeadBar">
     <div class="col-xs-12 col-md-6 border1">
       Something to show
     </div>
</div>

因为col -... div使用float系统，而row允许清除你的DOM。 顺便说一句，使用％作为高度与静态或相对位置不起作用。 你必须使用像素，em或你想要的。

#HeadBar {
   background-color: #ffffff;
   min-height: 50px; // example
   width: 100%;
   position: relative;
   display: block;
}

或者只是使用fixed或absolute属性来设置pourcentage值：

 #HeadBar {
   background-color: #ffffff;
   height: 10%;
   width: 100%;
   position: fixed;
   left: 0;
   top: 0;
   display: block;
}

希望它会有所帮助！

Answer 7

只需使用div而不是应用所有类，只需使用#headbar就可以了

<div id="HeadBar" class="">
                This is not showing up
            </div>

这将很好

Answer 8

你可以用这个，

#HeadBar 
{
  display:inline-flex;
  height:10%;
  width:100%;
}