CSS样式与引导

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

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

CSS

.fixed_pos {
    position: fixed;
}

.flowing_body {
    margin-top: 100px;
}

// 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;
}

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

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

引导CSS

.fixed_pos {
    position: fixed;
}

.flowing_body {
    margin-top: 100px;
}

// 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;
}

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

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

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>

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

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>

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

//其他一切都一样

但是，顶部的酒吧是缩小的大小，仍然没有反应

---

我非常感谢你在这方面的帮助。这里有一个很好的参考资料，我试图自己解决它，但还没有成功：

我就是这样解决这个问题的：

CSS

.fixed_pos {
    position: fixed;
}

.flowing_body {
    margin-top: 100px;
}

// 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;
}

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

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

---

最后，顶栏是固定的，响应迅速。

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

CSS

.fixed_pos {
    position: fixed;
}

.flowing_body {
    margin-top: 100px;
}

// 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;
}

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

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

---

最后，顶部栏是固定的，响应速度快。

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