Topic: dotted scrollspy and bootstrap 4.0 alpha 6
Dots are not positioned correctly and end up horizontal instead of vertical.
Fixed by adding this to my custom stylesheet:
.dotted-scrollspy li.nav-item {
box-sizing: border-box;
color: rgb(41, 43, 44);
}
.dotted-scrollspy .nav {
display: block;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.dotted-scrollspy li {
padding: 0;
}
Add comment
Hi trymkb,
Thanks for reporting a bug. Try this code:
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<section id="four"></section>
<section id="five"></section>
<section id="six"></section>
<!-- Scrollspy -->
<div class="dotted-scrollspy hidden-sm-down">
<ul class="nav smooth-scroll d-flex flex-column">
<li class="nav-item"><a class="nav-link" href="#one"><span></span></a></li>
<li class="nav-item"><a class="nav-link" href="#two"><span></span></a></li>
<li class="nav-item"><a class="nav-link" href="#three"><span></span></a></li>
<li class="nav-item"><a class="nav-link" href="#four"><span></span></a></li>
<li class="nav-item"><a class="nav-link" href="#five"><span></span></a></li>
<li class="nav-item"><a class="nav-link" href="#six"><span></span></a></li>
</ul>
</div>.dotted-scrollspy li {
display: block;
padding: 0 0px;
}FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags