0

我正在尝试在 Bootstrap-sass 环境中制作一个静态顶栏。问题：在保持响应的同时固定顶部栏。我已经阅读了关于继承和嵌套规则的 CSS 文档，但仍然不确定如何应用于这种情况。

现在，我的顶部栏固定在顶部，但没有响应。

CSS

.fixed_pos {
    position: fixed;
}

.flowing_body {
    margin-top: 100px;
}

引导 CSS

// Reset utility classes due to specificity
[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

HTML

<div class="container-fluid">
    <div class="fixed_pos row-fluid">
      <div class="span9">//left long side of top bar</div>
      <div class="span3">//right long side of top bar</div>
    </div>
    <div class="row fluid flowing_body">
       <%= yield %>
    </div>
</div>

这就是我尝试添加的响应功能： CSS

.row-fluid .fixed_pos {
    position: fixed;
}

HTML

<div class="row-fluid"><!-- MENUS -->
  <div class="fixed_pos">
    //everything else the same
  </div>
</div>

但随后顶部栏的尺寸缩小了，仍然没有响应。

我很感激这方面的任何帮助。这里有一个很好的参考，我尝试自己解决但还没有成功：链接

4

2 回答 2

4

这就是我解决问题的方法：

CSS

.row-fluid .fixed_pos {
    position: fixed;
    width: 80%;
}

看法

<div class="container-fluid">
    <!-- TOP BAR, FIXED -->
    <div class="row-fluid">
        <div class="fixed_pos">
        <!-- MENUS -->
            <div class="span12">
                <ul class="nav nav-tabs">
</appropriate endings..>

最后，顶部栏是固定的并且是响应式的。

于 2012-12-11T06:09:14.853 回答
0 
Add this code in bootstrap-responsive.css

@media (max-width: 979px){
.navbar-fixed-top, .navbar-fixed-bottom {position: fixed;}
.container-fluid{ margin-top:70px;}
}
于 2012-12-10T05:57:27.570 回答