How To Scroll Nav-pills (Bootstrap 3) Horizontally?
I am using the new Bootstrap 3 for nav-pills and I want to make all the pills stay in one horizontal line that can be scrolled (no wrap, even in title of every pill). even for 3 pi
Solution 1:
Replace following css with your css. & then check it.
.singledowre {
background-color: transparent;
min-height: 100%;
padding: 40px 14px;
background-image: url(img/shapes.png) !important;
background-size: 17%;
}
.singledowrediv {
display: table;
margin: 0 auto;
max-width: 950px;
}
.singleinfos {
background: white;
padding: 10px;
border-radius: 8px;
margin: 15px 0;
}
.container-fluid {
padding-right: 0 !important;
padding-left: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.singleinfos .singleinfostabs {
margin-bottom: 20px;
width: 100%;
}
.singleinfos .singleinfostabs > ul {
overflow-x: auto;
overflow-y:hidden;
flex-wrap: nowrap;
margin-bottom: 14px;
}
.singleinfos .singleinfostabs > ul > li {
background: white;
background: #869daf;
border-radius: 3px;
padding: 12px 0;
margin-left: 10px;
margin-right: 0;
margin-bottom: 20px;
}
.singleinfos .singleinfostabs .nav-pills > li > a {
font-size: 13px;
border-radius: 4px;
padding: 4px 10px;
text-align: center;
background: transparent;
color: white !important;
white-space: nowrap !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="singleinfos">
<div class="row container-fluid ">
<div class="singleinfostabs">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" class="moretab" href="#cootab11">سرفصل های دوره</a></li>
<li><a data-toggle="pill" class="moretab" href="#cootab12">نمونه های دوره</a></li>
<li><a data-toggle="pill" class="moretab" href="#cootab13">توضیحات بیشتر</a></li>
<li><a data-toggle="pill" class="moretab" href="#cootab13">توضیحات بیشتر</a></li>
<li><a data-toggle="pill" class="moretab" href="#cootab13">توضیحات بیشتر</a></li>
<li><a data-toggle="pill" class="moretab" href="#cootab13">توضیحات بیشتر</a></li>
<li><a data-toggle="pill" class="moretab" href="#cootab13">توضیحات بیشتر</a></li>
</ul>
</div>
<div class="tab-content">
<div id="cootab11" class="tab-pane fade in active sarfasldowre"> Text One </div>
<div id="cootab12" class="tab-pane fade"> Text Two </div>
<div id="cootab13" class="tab-pane fade"> Text Three </div>
</div>
</div>
</div>
Post a Comment for "How To Scroll Nav-pills (Bootstrap 3) Horizontally?"