9

私はしばらく Bootstrap をいじっています。私はいつもすべてを機能させることができましたが。Twitter Bootstrap docにあるものとまったく同じように、サイドナビゲーションを貼り付ける必要がある今後のプロジェクトで検討しています。

これらのクラスを自分の要素に含めようとさえしました。

<ul class="nav nav-list affix-top">

これらを起動して機能させるために何を追加する必要があるかを理解するのに役立つブートストラップの専門家がここにいます。また、シェブロンをあちらで行ったとおりに正確に表示することができませんでした。私のシェブロンは常にテキストと一緒にマッシュアップされます。

4

3 に答える 3

7

JS でオンにしたことを覚えていますか?

彼らは以下を使用します：

$('#navbar').affix()

、ただし、必要に応じてセレクターを変更する必要があります。

ああ、今、あなたはあなたが望むものを言い換えました！

彼らは別のクラスを持っています.bs-docs-sidenav

.bs-docs-sidenav {
    width: 228px;
    margin: 30px 0 0;
    padding: 0;
    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

active次に、li に呼び出されるクラスを追加し、その動作をここで指定します。

.bs-docs-sidenav > .active > a {
    position: relative;
    z-index: 2;
    padding: 9px 15px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}

要するに、それはブートストラップの組み込み機能ではありません。

于 2012-10-14T09:48:49.907 に答える
0

私は同じ問題を抱えていて、ブートストラップドキュメントページにこれが含まれていることがわかるまで、私のものを動作させることができませんでした.

http://twitter.github.com/bootstrap/assets/js/application.js

!function ($) {

  $(function(){

    var $window = $(window)

    // Disable certain links in docs
    $('section [href^=#]').click(function (e) {
      e.preventDefault()
    })

    // side bar
    $('.bs-docs-sidenav').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
      , bottom: 270
      }
    })          
  })
}(window.jQuery)

そのため、ブートストラップ afix ナビゲーションをコピーして貼り付ける際にコードを追加すると、問題が解決するはずです。

于 2013-01-27T08:49:12.160 に答える