【发布时间】：2018-09-06 05:15:00
【问题描述】：
请在“整页”模式下查看代码sn-p，以便清楚问题。当您一直滚动到底部并悬停在项目上时，您会看到它。悬停时页脚被向下推，这是我想要阻止发生的事情。此外，如果在悬停时进一步向下滚动，页脚将保持向上，然后主要内容将向上推。
基本上，问题在于导航项的高度将其余内容向上或向下推。因此，一个解决方案是以某种方式将导航项从文档流中取出，这样它们的高度就不会导致问题。我知道只有绝对定位或浮动才有可能，这是不可取的，但这只是思想的方向。
nav-items的设置高度只是上滑过渡效果需要的，所以如果有其他方法可以实现上滑效果，那么高度可以去掉，问题就解决了。问题是状态之间变化的是高度，而不是位置。
有一种方法适用于 chrome 但不适用于 Firefox：
为导航添加一个固定高度，从一边移除溢出：隐藏，并添加高 z-index 位置：相对于页脚。
当然，我正在寻找仅 CSS 的修复程序。没有 JavaScript ;p
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
main {
padding: 100px;
}
/* ----- aside with nav inside. ----- */
aside {
position: sticky;
bottom: 0;
overflow: hidden;
}
.nav {
display: flex;
align-items: flex-end;
}
/* ----- nav item ----- */
.nav-item {
flex: 1;
padding: 1rem;
border-top: 1px solid #dee2e6;
background: white;
text-align: center;
height: 110px;
transition: all 0.5s;
}
.nav-item:hover {
background: #17a2b8;
border-color: #17a2b8;
color: white;
height: 310px;
}
/* ----- border only between nav items ----- */
.nav-item+.nav-item {
border-left: 1px solid #dee2e6;
}
/* ----- h4 heading ----- */
.nav-item h4 {
font-size: 1rem;
}
.nav-item:hover h4 {
color: white;
}
/* ----- items inside nav-item to show only on hover ----- */
.nav-item .nav-link,
.nav-item img,
.nav-item .details {
display: none;
}
.nav-item:hover .nav-link,
.nav-item:hover img,
.nav-item:hover .details {
display: block;
}
/* ----- change <hr> color on hover ----- */
.nav-item:hover hr {
border-top-color: white;
}
/* ----- footer----- */
footer {
height: 50px;
}
/* ----- incrementally hide nav-items on smaller screens ----- */
@media (max-width: 576px) {
.nav-item:nth-child(n+4) {
display: none;
}
}
@media (max-width: 768px) {
.nav-item:nth-child(n+5) {
display: none;
}
}
@media (max-width: 992px) {
.nav-item:nth-child(n+6) {
display: none;
}
}
@media (max-width: 1200px) {
.nav-item:nth-child(n+7) {
display: none;
}
}
@media (max-width: 1370px) {
.nav-item:nth-child(n+8) {
display: none;
}
}<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
</main>
<aside>
<nav class="nav">
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
</nav>
</aside>
<footer class="container-fluid bg-dark text-white py-3">
<div class="row justify-content-end">
<small class="col-4 text-center">
2018 ALL RIGHTS RESERVED.
</small>
<small class="col-4 text-right">
My Website
</small>
</div>
</footer>【问题讨论】：
标签： css css-transitions css-position sticky