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 に答える