如何水平滚动导航药丸(Bootstrap 3)? [英] How to Scroll nav-pills (Bootstrap 3) horizontally?

查看：35
本文介绍了如何水平滚动导航药丸(Bootstrap 3)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在将新的 Bootstrap 3 用于导航药丸，我想让所有药丸保持在一条可以滚动的水平线上(没有包装，即使在每个药丸的标题中).即使是 3 个药丸，因为 我正在为小屏幕尝试.就像智能手机一样.

我尝试了一些解决方案:
水平滚动 Bootstrap 4 导航标签
Bootstrap 水平滚动标签栏

但我无法弥补.您可以在我的网站页面中看到我的问题:

<块引用>

https://karneta.com/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.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>

<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.com/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.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>

这篇关于如何水平滚动导航药丸(Bootstrap 3)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆