3

ブートストラップを使用しnavbarて、ボディセクションの上部を非表示にしないようにする方法を見つけようとしています。

実際、ここで推奨されているものを使用すると、非常によく解決されます。

TwitterBootstrap-ページのトップコンテンツをブロックするトップナビゲーションバー

しかし、まだ機能していないものがあります。次のようなリンクがある場合：

<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
<li><a href="#section4">Go to Section 4</a></li>

と

<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p><a href="#">Back to Top</a></p>

この場合、たとえばセクション2の直接リンク（またはショートカット）をクリックすると、ページはセクション2まで適切にスクロールダウンしますが、その先頭はブートストラップナビゲーションバーの後ろに隠れます。

これをどのように修正できるかについての手がかりはありますか？

4

3 に答える 3

1

あなたの身長<h4>を考慮して、あなたのにいくつかのトップパディングを置きます。navbarつまり、これをCSSに入れます。

h4 {
  padding-top: 30px;
}

もちろん、30px実際のnavbar身長に変更してください。

于 2012-10-06T20:58:31.400 に答える
1

リンクされたCSSに：target psuedo-selectorを追加することにより、選択したリンクに定義済みのパディングを適用できます（ブラウザーにwww.example.com#link1として表示されている場合）。

私は過去2時間、JqueryまたはJSを見つけてターゲットdivにパディングを適用しようとしてウェブを検索しようとしましたが、Googleの検索用語を変更した後、これが見つかりました

古いブラウザでこれをばかにする方法があるかもしれませんが、当分の間、これは私を幸せなキャンピングカーにします。

于 2012-11-30T04:28:04.020 に答える
0

私は同じ問題を抱えていて、実際の解決策を見つけられませんでしたが、もっと多くの回避策があります（「パディングトップ」の回避策自体のように、それは私には非常にハックのようです）。トップバーの問題はまだ解決されていないようです。人々はどういうわけかそれをハックしているだけです。

私にとって（可能な限りうまく）機能する非侵襲的な回避策の1つは、次のJavaScriptをページに追加することです（「パディングトップ」ハックは別として）。

var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);

これは、ブートストラップGitHubの問題へのコメントで見つかりました。ただし、関数は必要なすべての場合（たとえば、同じアンカーに再度移動する場合）に実行されるわけではありません。

より信頼性の高い回避策は、CSS相対ポジショニングを使用してアンカー位置を移動することです（このStackOverflowの回答にあります：

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

ただし、アンカーにクラスを指定する必要があるため（リンクと区別するため）、これはより侵襲的です。したがって、すべてのアンカーHTMLコードを更新する必要があります（たとえば、アンカーを生成するリジッドCMSを扱っている場合など、常に可能であるとは限りません）。

<a class="anchor" id="top"></a>
于 2015-06-05T07:18:58.150 に答える