web-dev-qa-db-ja.com

Bootstrap affixがbootstrapクラスで機能しない

私はbootstrapに比較的慣れており、bootstrap affixを使用してページをデザインしようとしています。ここでは、コードでcol-lg-6 affix対象のdiv内にあるそのクラスは完全に正常に動作しますが、指定されたbootstrapクラスが適用されていると動作しません。その特定のクラスを削除してから動作しましたまったく問題ありません。

<body id="top" data-spy="scroll" data-target="#header">
  <header id="header" style="background-position: 0% 0px;">
    <a class="image avatar" style="cursor: pointer;">
      <img src="resources/images/Nimesh.jpg" alt=""></a>
    <h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>

    <ul class="nav nav-tabs nav-stacked" data-spy="affix">
      <li class="active"><a href="#section-1">Section One</a></li>
      <li><a href="#section-2">Section Two</a></li>
      <li><a href="#section-3">Section Three</a></li>
      <li><a href="#section-4">Section Four</a></li>
      <li><a href="#section-5">Section Five</a></li>
    </ul>

  </header>

  <div id="profileImage">

  </div>

  <div id="main">
    <div id="section-1" class="background">
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
    </div>

    <div id="section-2" class="background">
      <div class="col-lg-6">
        <!--content 2a  -->
      </div>
      <div class="col-lg-6">
        <!--content 2b  -->
      </div>
    </div>

    <div id="section-3" class="background">
      <div class="col-lg-6">
        <!--content 3a  -->
      </div>
      <div class="col-lg-6">
        <!--content 3b  -->
      </div>
    </div>

    <div id="section-4" class="background">
      <div class="col-lg-6">
        <!--content 4a  -->
      </div>
      <div class="col-lg-6">
        <!--content 4b  -->
      </div>
    </div>

    <div id="section-5" class="background">
      <div class="col-lg-6">
        <!--content 5a  -->
      </div>
      <div class="col-lg-6">
        <!--content 5b  -->
      </div>
    </div>
  </div>
</body>
csstwitter-bootstrapaffixbootstrap-affix
13
Nimesh

この問題は2つの部分に分類できます。

  1. Bootstrapグリッドシステムを使用するには（例：col-lg-6）
  2. Bootstrapをセクションに付加する


1. Bootstrapグリッドシステム

グリッドシステムを正しく機能させるには、.container、.row、.col-xs-*の3つのクラスが必要です。

  • .container：ドキュメントのラッパーに追加する必要があります。
  • .row：列を設定する場合は、それらの列を.rowラッパーでラップする必要があります。
  • .col-xs-*：ここでコンテンツの幅を設定できます。

したがって、ドキュメントは次のようになります。

<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-3"></div>
  </div>
</div>

グリッドシステムのドキュメントは here です。

あなたの場合、列に.rowも.containerも指定していないようです。そのため、実際のレイアウトはある程度壊れ、予期しないものになります。これがおそらく、これらのcol-lg-*クラスを削除した場合に、期待どおりに機能する理由だと思います。


2. Bootstrap Affix

Affixの 公式ドキュメント は実際にはかなりあいまいです。基本的に、ドキュメントを下にスクロールすると、<div data-spy="affix">要素が次の状態からシフトします。

  1. ページが読み込まれたときに.affix-topをスパイ要素に追加します
  2. data-offset-topの値までスクロールすると、.affix-topクラスが削除され、.affixクラスが同じ要素に追加されます。
  3. data-offset-bottomの値までスクロールすると、.affixクラスが削除され、.affix-bottomクラスが同じ要素に追加されます。

文書が述べたように、あなたはこれらのクラスにCSSルールを設定して、接辞プラグインを機能させる必要があります。

設定する必要がある3つの重要なルールがあります。1. .affix-top、.affix、.affix-bottomの幅2.修正されたときのaffixエレメントの希望する位置3.回復する.affix-bottom位置fixedからabsolute

したがって、CSSは次のようになります。

.affix {
  top: 0;
  width: 100%;
}

.affix-top {
  width: 100%;
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}


これが大まかな Codepen 接辞の使用例です。コードをコピーしました。セクションにcol-lg-6を追加してもしなくても機能します。ウィンドウのサイズを変更して、2列のレイアウトを表示できます。

言及する必要があることの1つは、ほとんどのデザインケースでサイドバーにセクションタイトルリストを表示するために使用されるため、ヘッダーにaffix要素を配置する理由がよくわからないことです。その意味で、グリッドの列設定でヘッダーからメイン領域に移動します。

これがお役に立てば幸いです。

23
kavare