twitter-bootstrap – 导航链接到部分 – 由navbar-fixed-top隐

发布时间：2020-12-17 21:23:47 所属栏目：安全来源：网络整理

导读：我在使用带引导程序的section ref链接时遇到了一些麻烦.我有一个固定在页面顶部的导航栏,然后是span3中的某个部分导航 ???? 此处的项目链接到span9中的标记.我已经将主体填充了60px,以便页面内容位于固定导航栏下方,但是当我使用部分链接时,相关内容对齐到页

我在使用带引导程序的section ref链接时遇到了一些麻烦.我有一个固定在页面顶部的导航栏,然后是span3中的某个部分导航
????
此处的项目链接到span9中的标记.我已经将主体填充了60px,以便页面内容位于固定导航栏下方,但是当我使用部分链接时,相关内容对齐到页面的最顶部,在导航栏下方 – 这意味着标题将被隐藏.

我看过Bootstrap: affix navigation blocking scroll-to section title
?但这会填充部分本身,这会改变间距.我想保持页面的间距,默认情况下使用Bootstrap.

当我使用部分链接时,如何阻止span9中的内容消失在导航栏下？

解决方法

只需在元素顶部添加填充,然后添加负边距.您只需要调整两者的值(在这种情况下为15px),具体取决于导航栏的高度,以及是否在移动设备上固定等等.

这是a working fiddle

HTML

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="#description1">Description 1</a>

                </li>
                <li><a href="#description2">Description 2</a>

                </li>
                <li><a href="#description3">Description 3</a>

                </li>
                <li><a href="#description4">Description 4</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<section id="description1">
    <div class="row">
        <div class="span9">
            <div class="content-bubble drop-shadow curved">
                 <h2 class="heading">Product Description 1</h2>

                <p>Lorem ipsum dolor sit amet,consectetur elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p class="last">Lorem ipsum dolor sit amet,consectetur adipisicing elit,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
            <div class="content-bubble-triangle"></div>
        </div>
    </div>
</section>
<section id="description2">
    <div class="row">
        <div class="span9">
            <div class="content-bubble drop-shadow curved">
                 <h2 class="heading">Product Description </h2>

                <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
            <div class="content-bubble-triangle"></div>
        </div>
    </div>
</section>
<section id="description3">
    <div class="row">
        <div class="span9">
            <div class="content-bubble drop-shadow curved">
                 <h2 class="heading">Product Description 3</h2>

                <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
            <div class="content-bubble-triangle"></div>
        </div>
    </div>
</section>
<section id="description4">
    <div class="row">
        <div class="span9">
            <div class="content-bubble drop-shadow curved">
                 <h2 class="heading">Product Description 4</h2>

                <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
            <div class="content-bubble-triangle"></div>
        </div>
    </div>
</section>

CSS

.navbar-inner{
    min-height:95px;
}
section {
    padding-top: 15px;
    margin-top: -15px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!