javascript - Bootstrap Breadcrumb 单击时进入中心 div

Question

我设置了一个站点地图页面，并在顶部使用面包屑导航将用户带到他们寻找的直接位置，感觉它有点长。但是，当他们单击面包屑时，面包屑进入了正确的 div，但进入了很远的下方。

这是我的代码

<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>

我可以使用完全相同的代码让它在 JSfiddle 中工作 jsfiddle link

在我正在处理的网站上，Working website

正如您在我的工作网页上看到的那样，它会超过标题几行？

Answer 1

因为你有一个固定的header，你需要padding到header高度的元素和一个相同高度的负margin来抵消固定标题高度。为具有用于 href="#{idlink}" 的 id 链接的元素创建一个名为 .fake-margin 的类，并提供以下 CSS :

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

现在将此类 fake-margin 添加到这些链接中，即:

<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">

等等。它不会显示在您的 fiddle 中，因为 fiddle 没有固定的标题。 :)