Bootstrap Breadcrumb aller en centre de plongée quand on clique

Question

J'ai mis en place une page de carte du site et j'utilise du fil d'Ariane en haut pour amener l'utilisateur à l'endroit où il a l'impression qu'il a pris un peu de temps. Cependant, quand ils cliquent sur la miette de pain va à la div correcte, mais dans va trop loin.

Voici mon code

<div class="container" style="border: 1px solid black;"> 
    <div class="row" style="border: 1px solid black; background-color: #3a5d85; "> 
      <h3 style="text-align: center; font-size: 40px;"><b>Site Map</b></h3> 

     <ul class="breadcrumb" style="font-size: 18px;"> 
      <li class="actve"><a href="#Company">Company</a> 

      </li> 
      <li><a href="#Resources">Resources</a> 

      </li> 
      <li><a href="#Signs">Signs</a> 

      </li> 
      <li><a href="#Magnets">Magnets</a> 

      </li> 
      <li><a href="#Banners">Banners</a> 

      </li> 
      <li><a href="#Stickers">Stickers & Decals</a> 

      </li> 
      <li><a href="#Yard">Yard Signs</a> 

      </li> 
      <li><a href="#Business">Business Signs</a> 

      </li> 
      <li><a href="#Social">Social</a> 

      </li> 
     </ul> 
    </div> 
    <div id="Company"> 
     <ul> 
      <!--Company--> 
       <h3>Company</h3> 

      <li>About</li> 
      <li>Services</li> 
      <li>Contact Us</li> 
     </ul> 
     <!--End Company--> 
    </div> 
    <div id="Resources"> 
     <ul id="Resources"> 
      <!--Resources--> 
       <h3>Resources</h3> 

      <li>FAQ</li> 
      <li>Terms of Sale</li> 
      <li>Terms of Service</li> 
      <li>Privacy Policy</li> 
     </ul> 
     <!--End Resources--> 
    </div> 
    <div id="Signs"> 
     <ul id="Signs"> 
      <!--Signs--> 
       <h3>Signs</h3> 

      <li>Real Estate</li> 
      <li>Art Prints</li> 
      <li>Street Signs</li> 
      <li>Political Signs</li> 
      <li>Property Signs</li> 
      <li>For Sale Signs</li> 
      <li>Safety Signs</li> 
      <li>Traffic Signs</li> 
      <li>Novelty License Plates</li> 
      <li>Oversized Checks</li> 
     </ul> 
     <!--End Signs--> 
    </div> 
    <div id="Magnets"> 
     <ul id="Magnets"> 
      <!--Magnets--> 
       <h3>Magnets</h3> 

      <li>General Magnets</li> 
      <ul> 
       <li>Events</li> 
       <li>Restaurants</li> 
       <li>Business</li> 
       <li>Services</li> 
       <li>Political</li> 
       <li>General</li> 
      </ul> 
      <li>Car Magnets</li> 
      <ul> 
       <li>Events</li> 
       <li>Restaurants</li> 
       <li>Business</li> 
       <li>Services</li> 
       <li>Political</li> 
       <li>General</li> 
      </ul> 
      <li>Fridge Magnets</li> 
      <ul> 
       <li>Promotional</li> 
       <li>Calendar</li> 
       <li>Reminder</li> 
      </ul> 
     </ul> 
     <!--End Magnets--> 
    </div> 
    <div id="Banners"> 
     <ul id="Banners"> 
      <!--Banners--> 
       <h3>Banners</h3> 

      <li>Custom Vinyl Banners</li> 
      <ul> 
       <li>Events</li> 
       <li>Birthdays</li> 
       <li>Sports</li> 
       <li>Schools</li> 
       <li>Organizations</li> 
       <li>Real Estate</li> 
       <li>Religous</li> 
       <li>Holidays</li> 
       <li>Political</li> 
      </ul> 
      <li>General Banners</li> 
      <ul> 
       <li>Events</li> 
       <li>Birthdays</li> 
       <li>Sports</li> 
       <li>Schools</li> 
       <li>Organizations</li> 
       <li>Real Estate</li> 
       <li>Religous</li> 
       <li>Holidays</li> 
       <li>Political</li> 
      </ul> 
     </ul> 
     <!--End Banners--> 
    </div> 
    <div id="Stickers"> 
     <ul id="Stickers"> 
      <!--Stickers & Decals--> 
       <h3>Stickers & Decals</h3> 

      <li>Digital Print Decals</li> 
      <ul> 
       <li>School</li> 
       <li>Car Clubs</li> 
       <li>Sports</li> 
       <li>Political</li> 
       <li>"I Heart" Pictures</li> 
       <li>Religous</li> 
      </ul> 
      <li>Vinyl lettering</li> 
      <ul> 
       <li>School</li> 
       <li>Car Clubs</li> 
       <li>Sports</li> 
       <li>Political</li> 
       <li>"I Heart" Pictures</li> 
       <li>Religous</li> 
      </ul> 
      <li>Window Decals</li> 
      <ul> 
       <li>School</li> 
       <li>Car Clubs</li> 
       <li>Sports</li> 
       <li>Political</li> 
       <li>"I Heart" Pictures</li> 
       <li>Religous</li> 
      </ul> 
      <li>Bumper Stickers</li> 
      <ul> 
       <li>School</li> 
       <li>Car Clubs</li> 
       <li>Sports</li> 
       <li>Political</li> 
       <li>"I Heart" Pictures</li> 
       <li>Religous</li> 
      </ul> 
      <li>Store Front Decals</li> 
      <ul> 
       <li>Store Hours</li> 
       <li>Legal Info</li> 
       <li>Social Media Decals</li> 
      </ul> 
     </ul> 
     <!--End Stickers & Decals--> 
    </div> 
    <div id="Yard"> 
     <ul id="Yard"> 
      <!--Yard Signs--> 
       <h3>Yard Signs</h3> 

      <li>Now Open</li> 
      <li>Political</li> 
      <li>For Sale</li> 
      <li>Business</li> 
      <li>Promotional</li> 
      <li>Events</li> 
      <li>Parking</li> 
     </ul> 
     <!--End yard Signs--> 
    </div> 
    <div id="Business"> 
     <ul id="Business"> 
      <!--Business Signs--> 
       <h3>Business Signs</h3> 

      <li>Business Signs</li> 
     </ul> 
     <!--End Business Signs--> 
    </div> 
    <div id="Social"> 
     <ul id="Social"> 
      <!--Social--> 
       <h3>Social Media</h3> 

      <li>Facebook</li> 
      <li>Twitter</li> 
      <li>Instagram</li> 
     </ul> 
     <!--End Social--> 
    </div> 
</div> 
</div> 

Je peux l'obtenir pour travailler dans jsFiddle en utilisant exactement le même code de jsfiddle link

Ici, il est sur le site im travaille, Working website

Comme vous peut voir sur ma page de travail, il va passer l'en-tête quelques lignes?

Answer 1

Puisque vous avez un en-tête fixe, vous avez besoin de padding à l'élément de la hauteur de l'en-tête et un margin négatif de la même hauteur à l'élément pour compenser la hauteur de l'en-tête fixe. Créer une classe appelée .fake-margin aux éléments avec id liens utilisés pour href="#{idlink}" et donner le CSS suivant:

.fake-margin { 
    margin-top: -72px; /* Header height + margin */ 
    padding-top: 72px; /* Header height + margin */ 
} 

Maintenant, ajoutez cette classe fake-margin à ces liens, à savoir:

<div id="Company" class="fake-margin"> 
<div id="Resources" class="fake-margin"> 
<div id="Signs" class="fake-margin"> 
<div id="Magnets" class="fake-margin"> 
<div id="Banners" class="fake-margin"> 

Et ainsi de suite. Cela ne se voit pas dans votre violon parce que le violon n'a pas de tête fixe en place. :)