问题描述
限时送ChatGPT账号..我正在将新的 Bootstrap 3 用于导航药丸,我想让所有药丸保持在一条可以滚动的水平线上(没有包装,即使在每个药丸的标题中).即使是 3 个药丸,因为 我正在为小屏幕尝试.就像智能手机一样.
我尝试了一些解决方案:
水平滚动 Bootstrap 4 导航标签
Bootstrap 水平滚动标签栏
但我无法弥补.您可以在我的网站页面中看到我的问题:
<块引用>https://karneta/downloads/how-创造一个观众角色/
请帮忙解决这个问题.
HTML
<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><div class="tab-content"><div id="cootab11" class="tab-pane 在活动 sarfasldowre 中淡入淡出">正文一
<div id="cootab12" class="tab-pane淡入淡出">正文二
<div id="cootab13" class="tab-pane淡入淡出">正文三
CSS
.singledowre {背景色:透明;最小高度:100%;填充:40px 14px;背景图片:网址(img/shapes.png)!重要;背景尺寸:17%;}.singledowrediv {显示:表;边距:0 自动;最大宽度:950px;}.singleinfos {背景:白色;填充:10px;边框半径:8px;边距:15px 0;}.container-fluid {padding-right: 0 !important;padding-left: 0 !important;margin-right: 0 !important;margin-left: 0 !important;}.singleinfos .singleinfostab {底边距:20px;}.singleinfos .singleinfostabs >ul{显示:弹性;宽度:100%;底边距:14px;}.singleinfos .singleinfostabs >升 >李{背景:白色;背景:#869daf;边框半径:3px;填充:12px 0;宽度:100%;左边距:10px;右边距:0;底边距:20px;}.singleinfos .singleinfostabs .nav-pills >立>一种 {字体大小:13px;边框半径:4px;填充:4px 10px;文本对齐:居中;背景:透明;颜色:白色!重要;}
解决方案 将以下 css 替换为您的 css.&然后检查一下.
.singledowre {背景色:透明;最小高度:100%;填充:40px 14px;背景图片:网址(img/shapes.png)!重要;背景尺寸:17%;}.singledowrediv {显示:表;边距:0 自动;最大宽度:950px;}.singleinfos {背景:白色;填充:10px;边框半径:8px;边距:15px 0;}.container-fluid {padding-right: 0 !important;padding-left: 0 !important;margin-right: 0 !important;margin-left: 0 !important;}.singleinfos .singleinfostab {底边距:20px;宽度:100%;}.singleinfos .singleinfostabs >ul{溢出-x:自动;溢出-y:隐藏;flex-wrap: nowrap;底边距:14px;}.singleinfos .singleinfostabs >升 >李{背景:白色;背景:#869daf;边框半径:3px;填充:12px 0;左边距:10px;右边距:0;底边距:20px;}.singleinfos .singleinfostabs .nav-pills >立>一种 {字体大小:13px;边框半径:4px;填充:4px 10px;文本对齐:居中;背景:透明;颜色:白色!重要;空白: nowrap !important;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/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><div class="tab-content"><div id="cootab11" class="tab-pane 在活动 sarfasldowre 中淡入淡出">文本一
<div id="cootab12" class="tab-pane淡入淡出">文本二
<div id="cootab13" class="tab-pane淡入淡出">正文三
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 pills because I am trying that for small screen. like smartphones.
I tried some solutions:
Scroll Bootstrap 4 nav-tabs horizontally
Bootstrap horizontal scrollable tab bar
but I could not make it up. you can see my problem in my website page:
https://karneta/downloads/how-to-create-an-audience-persona/
Please help out to solve that.
HTML
<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>
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;
}
.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;
}
解决方案
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/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>
这篇关于如何水平滚动导航药丸(Bootstrap 3)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论