我正在将新的Bootstrap 3用于导航药,并且我想使所有药保持在一条可以滚动的水平线上(没有包裹,即使每个药的标题也没有)。即使是3粒,因为 我正在尝试将其用于小屏幕。例如智能手机。
我尝试了一些解决方案:
Scroll Bootstrap 4 nav-tabs horizontally
Bootstrap horizontal scrollable tab bar
但是我不能弥补。您可以在我的网站页面上看到我的问题:
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;
}
答案 0 :(得分:0)
用您的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>