使用 Bootstrap 进行 CSS 样式设置答案

【问题标题】：CSS Styling with Bootstrap使用 Bootstrap 进行 CSS 样式设置
【发布时间】：2012-11-27 12:55:12
【问题描述】：

我正在尝试在 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>

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

感谢您对此提供的任何帮助。这里有一个很好的参考，我尝试自己解决但还没有成功：Link

【问题讨论】：

标签： css twitter-bootstrap css-position

【解决方案1】：

Add this code in bootstrap-responsive.css

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

【讨论】：

谢谢，但这并不能解决问题。当我将行流体放在导航栏上方时，顶部导航栏的宽度似乎缩小了。

【解决方案2】：

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

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

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

【讨论】：