ブートストラップパネルと固定式のナビゲーションバーでアンカータグをオフセット

Question

固定式のナビゲーションバーを使用して、ブートストラップ設定でアンカータグを正しく動作させようとしています。 jumptargetクラスが割り当てられてその後

.jumptarget:before { 
display: block; 
content: " "; 
margin-top: -60px; 
height: 60px; 
visibility: hidden; 
} 

私はdiv Sを使用しています：私は固定されたナビゲーションバーを持っているので、私は適切な場所にスクロールダウンアンカータグ（ハッシュリンク）を試してみて、取得するには、以下のCSSコードを使用しています私のコンテンツを保持しています。しかし、私がパネルにこれらのdivを回すと、上記のCSSコードは機能しなくなります。

<div class="panel panel-default jumptarget" id="1"> 
<!-- random content here - this is the example that doesn't work --> 
</div> 

これらのパネルとアンカータグを一緒に使用するにはどうすればよいですか。また、anchortagクラスのdivでパネルを囲み、関連するidを表示すると、私のウェブサイトの表示がぼやけます。どうしてこれなの？

Answer 1

あなたの質問に含まれていないJavascriptを使用していない限り、アンカーリンク（同じページのコンテンツに移動する）はIDで動作します。

この例では動作します：

http://jsbin.com/xivecaz/2/edit?html,css,output

注：私は、ページナビゲーションを証明するためにスクロールできるようにするために上記および下記のダミーコンテンツを追加しています。