Question

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

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

CSS

.fixed_pos {
    position: fixed;
}

.flowing_body {
    margin-top: 100px;
}

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

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

我感谢任何帮助。这里有一个很好的参考，我试图自己解决但尚未成功：Link

Answer 1

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

<强> CSS

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

查看

<div class="container-fluid">  <div class="row-fluid"> <div class="fixed_pos">  <div class="span12"> <ul class="nav nav-tabs"> </appropriate endings..>

最后，顶栏是固定的，反应灵敏。

Answer 2

Add this code in bootstrap-responsive.css

@media (max-width: 979px){
.navbar-fixed-top, .navbar-fixed-bottom {position: fixed;}
.container-fluid{ margin-top:70px;}
}

使用Bootstrap的CSS样式

2 个答案: