Question

基本引导程序模板here顶部有一个固定栏。我想直接在其下面放置一个div。

这是该栏的HTML（直接从页面源复制，因此有CSS类引用）：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse collapse" style="height: 0px;">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form pull-right">
          <input type="text" placeholder="Email" class="span2">
          <input type="password" placeholder="Password" class="span2">
          <button class="btn" type="submit">Sign in</button>
        </form>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

这是我在div下面尝试的尝试：

<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>

它几乎可以工作，但问题是'top：40px;'。调整屏幕大小时，顶部的固定栏会改变高度。

如何使它始终直接位于条形图下方而不管条形高度？奖励指出如何在不使用<center>

的情况下水平居中

编辑：对于水平居中的事情，我尝试将div包装在100％宽度的div中，然后在其中添加'margin：0 auto'，但这不适用于修复位置

Edit2 ：here是jsfiddle。 html的第38行是我的尝试，上面的所有内容都是导航栏div。

Answer 1

如果您已经在使用jQuery，可以使用以下内容：

<强> Working Example

<强> Full screen example

x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
    $('.new').css({
        top: t,
        left: c
    });
});

$(document).ready(x);
$(window).resize(x);

注意：更新的媒体查询示例可以更好地显示脚本的效果。

当然，您可以单独使用CSS来完成此操作，但您需要使用类似的媒体查询：

<强> CSS only working example

.new {
    position:fixed;
    margin: 0 auto;
    top: 51px;
    left:0;
    right:0;
    background-color:#CF4342;
    color:#fff;
    z-index:5000;
    width:50px;
}
@media (max-width: 979px) {
    .new {
        top: 61px;
    }
}

请注意，如果将屏幕缩小得太远，仅css解决方案将“中断”。 jQuery解决方案不会有这个问题。

Answer 2

尝试在css中添加此行或在bootstrap css文件中编辑该类。确保您的css文件位于bootstrap css文件下，如果您选择将其添加到您自己的文件中。它有意义吗？

.navbar-fixed-top { margin-bottom: 0 !important; }

Answer 3

Bootstrap在documentation中说明了以下内容：

添加.navbar-fixed-top 并记住要考虑隐藏区域在其下方添加至少40px填充到<body> 。确定在核心Bootstrap CSS之后和可选之前添加这个响应式CSS。

这就是我想要的......

我更新了你的小提琴来演示http://jsfiddle.net/Pevara/MgcDU/5403/
我做了以下几点：
- 用英雄单位将你的'hello'移到容器内 - 删除了'你好'上的定位 - 删除了.container上设置的10px边距 - 按照Bootstrap

的建议，将以下内容添加到您的CSS中

body {
    padding-top: 40px;
}

固定位置div与'top'相对于父div

3 个答案: