0

ブートストラップを使用して、ジャンボトロン トップ、サイドナビゲーション (上部に固定)、およびサイドナビゲーションをクリックすると上部に表示されるコンテンツのセクションを含むページを作成しています。機能的にはすべて問題なく動作していますが、メイン コンテンツの配置には助けが必要です。

私の目標は、可能であれば、サイドナビゲーションでクリックされたコンテンツのセクションをページの最上部ではなく、ブラウザ ウィンドウの最上部から約 70 ピクセル下に表示することです。各セクションの上部に 70px を簡単に追加できますが、ページのセクション間に余白が多くなりすぎてしまいます。コードは次のように構成されています...

<body >
<!-- navigation header - fixed to top and transparent 
================================================== -->
    <!-- <header><ul><li><a></a><li><ul></header>-->


<!-- jumbotron 
================================================== -->

<div class="container">
    <div class="row-fluid" align="center">
        <div class="jumbotron span12">
             <!-- jumbotron content height: 800px -->
        </div>
    </div>



<!-- side nav 
================================================== -->
    <div class="row">
        <div class="span3" id="side-nav" data-spy="affix" data-offset-top="760">
            <ul class="nav nav-list">
                <li><a href="#section_1_name">section 1</a></li>
                <li><a href="#section_2_name">section 2</a></li>
                <li><a> <!-- links to additional sections --> </a></li>
            </ul>
        </div>


        <div class="span9 main-content">

        <!-- Sample section 1
        ================================================== -->
            <section id="section_1_name">
              <div class="page-header">
                <h1>header</h1>
              </div>

              <h3>Why you should do this</h3>
              <p>It's so amazing you'll want to do it.  It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p>

              <h3>Specfic Instructions</h3>
              <p>lorem ispum ... </p>
            </section>

        <!-- Sample section 2
        ================================================== -->
            <section id="section_2_name">
              <div class="page-header">
                <h1>header</h1>
              </div>

              <h3>Why you should do this</h3>
              <p>It's so amazing you'll want to do it.  It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p>

              <h3>Specfic Instructions</h3>
              <p>lorem ispum ... </p>
            </section>

        <!-- Additional sections
        ================================================== -->

        </div> <!-- end of row -->

    </div> <!-- end span9 --->
</body>

サイドナビゲーションでクリックしたときに、各セクション X を上部から 70 ピクセル下に表示する方法はありますか?

4

1 に答える 1

0

サイド ナビゲーションを含むすべてをプッシュ ダウンする場合は、コンテナ div に を追加padding-top: 70px;します。

ページのスクロールに合わせてサイド ナビゲーションを動かしたくない場合は、"affix" クラスを追加します。 <ul class="nav nav-list affix">

あなたの例では#、href リンクにも追加する必要があります。 <li><a href="#section_1_name">section 1</a></li>

Bootstrap サイトの構築方法 (少なくとも 2.3) は、公開しているコードを最適に使用していないため、例としてページ ソースを使用しても常にうまくいくとは限りません。

また、ナビゲーションの機能はページ内のアンカーに似ており、そのセクションに移動するだけなので、コンテンツが多いほど見栄えがよくなります。十分なコンテンツがない場合、ページはその場所に「ジャンプ」しません。また、小さなセクションがあるときや最後のセクションでは、奇妙な動作をしているように見えます。ブートストラップサイトでさえこれを行います。

于 2013-11-27T18:29:34.980 に答える