[英]How to Scroll nav-pills (Bootstrap 3) horizontally?
我正在将新的 Bootstrap 3 用于导航药丸,我想让所有药丸都保持在一条可以滚动的水平线上(没有换行,即使在每个药丸的标题中)。 即使是 3 粒药丸,因为我正在尝试将其用于小屏幕。 像智能手机。
我尝试了一些解决方案:
水平滚动 Bootstrap 4 导航选项卡
Bootstrap 水平滚动标签栏
但我无法弥补。 您可以在我的网站页面中看到我的问题:
https://karneta.com/downloads/how-to-create-an-audience-persona/
请帮忙解决这个问题。
<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>
</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>
</div>
.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;
}
.singleinfos .singleinfostabs > ul {
display: flex;
width: 100%;
margin-bottom: 14px;
}
.singleinfos .singleinfostabs > ul > li {
background: white;
background: #869daf;
border-radius: 3px;
padding: 12px 0;
width: 100%;
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;
}
用您的 css 替换以下 css。 & 然后检查它。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.