Question

美好的一天，

我正试图在Bootstrap Framework的帮助下制作我的第一个响应式布局。

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

我添加了以下内容：

    <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 - 与{{1}重叠在#HeadBar

中

#HeadBar

Answer 2

将$http(method: '<TYPE>', headers: headers, url: <URL>, data: {}).success(...); var headers = {'X-Frame-Options': ...};添加到css。

Fiddle

Answer 3

我建议不要使用z-index来修复导致问题发生的position问题。

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

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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/

<强> OR

结构更改

为.row添加#HeadBar的总结。并从row

中删除课程#HeadBar

代码：

<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 -... divs使用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%;
}

HTML CSS，Bootstrap响应DIV高度

8 个答案: