2

这里的基本引导模板在顶部有一个固定栏。我想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：这里是 jsfiddle。html 的第 38 行是我的尝试，上面的所有内容都是导航栏 div。

4

3 回答 3

4

如果你已经在使用 jQuery，你可以使用这样的东西：

工作示例

全屏示例

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 工作示例

.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 解决方案不会有这个问题。

于 2013-06-23T15:51:41.360 回答
0

Try to add this line in your css or edit the class in the bootstrap css file. Make sure your css file is under the bootstrap css file incase you choose to add it in your own. Does it make sense?

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

于 2013-06-23T15:20:33.790 回答
0

Bootstrap 在其文档中说明了以下内容：

添加 .navbar-fixed-top并记住通过向 .navbar-fixed-top 添加至少 40px 的填充来说明其下方的隐藏区域<body>。请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

所以这就是我会尝试的......

我更新了你的小提琴来演示http://jsfiddle.net/Pevara/MgcDU/5403/
我做了以下事情：
- 将你的 'hello 移动到带有英雄单元的容器内
- 删除了 'hello' 上的定位
- 删除了 10px您在 .container 上设置的边距
- 按照 Bootstrap 的建议，将以下内容添加到您的 css 

body {
    padding-top: 40px;
}
于 2013-06-23T15:48:22.343 回答