Bootstrap 水平可滚动选项卡栏

qaxu7uf2  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(5)|浏览(289)

我在Bootstrap 3中创建了一个带有标签栏的应用程序。我动态地添加和删除标签。这一切都很好，我想做的是，如果有太多的标签，而不是创建多行或多个标签，标签栏可以水平滚动标签。
有没有人这样做或有一个想法如何实现这一点？

twitter-bootstrap

5条答案

按热度按时间
ikfrs5lh

ikfrs5lh1#

以下是一个示例：
(Not由于某种原因，我在代码段中工作，所以这里有一个指向Bootply的链接：（第10页）
第一个

赞(0）分享  回复(0）举报  2022-12-07
r6vfmomb

r6vfmomb2#

我用以下方法解决了这个问题：

.nav.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

示例：https://codepen.io/r3l4x/pen/mdpdMLQ
请注意，肯定是跨浏览器的东西，所以可能不是一个好的答案。

赞(0）分享  回复(0）举报  2022-12-07
yhived7q

yhived7q3#

使用纯javascript引导5个制表符水平滚动许多项

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
   <title>Bootstrap 5 tab horizontal scroll for many item</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
   <style>
      .tab-scroller{
         position: relative;
         max-width: 100%;
         overflow: hidden;
      }
      .tab-scroller-arrow{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 25px;
        cursor: pointer;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #222222;
      }
      .tab-scroller .right-arrow{
         right: 0;
      }
      .tab-scroller .left-arrow{
         left: 0;
      }
      .tab-scroller .left-arrow.d-none~.nav{
         padding-left: 0;
      }
      .tab-scroller .nav{
         position: relative;
         padding-left: 35px;
         flex-wrap: nowrap;
      }
   </style>
</head>
<div class="tab-scroller" >
   <i class="tab-scroller-arrow left-arrow d-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
    </svg>
   </i>
   <i class="tab-scroller-arrow right-arrow d-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
       </svg>
   </i>
   <ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
      </li>
    </ul>
</div>
 <div class="tab-content" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Tab 1</div>
   <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Tab 2</div>
   <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Tab 3</div>
   <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">Tab 4</div>
 </div>


   <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
   <!-- Custom js -->
  <script>
    document.addEventListener("DOMContentLoaded", function(){
//  selector
document.querySelectorAll(".tab-scroller").forEach((el) => {
      let scrollTabInner = el.querySelector(".nav")
      let scrollTabItem = el.querySelectorAll(".nav-item")
      let leftArrow = el.querySelector(".left-arrow")
      let rightArrow = el.querySelector(".right-arrow")
      //scrollable tab width
      let scrollTabWidth = el.offsetWidth

      //all tab items width
      let scrollTabItemsWidth = () => {
        let itemsWidth = 0;
        scrollTabItem.forEach(el => {
          let itemWidth = el.offsetWidth;
          itemsWidth += itemWidth;
        });
        return itemsWidth
      }

      //hidden tab item width
      let widthOfHiddenItems = scrollTabItemsWidth() - scrollTabWidth;
      let rightValue = 0;
      if (scrollTabItemsWidth() > scrollTabWidth) {
        rightArrow.classList.remove("d-none")
      }

      //right arrow click functionality
      rightArrow.addEventListener("click", () => {
        if (rightValue > widthOfHiddenItems) {
          rightArrow.classList.add("d-none")
          leftArrow.classList.remove("d-none")
          scrollTabInner.style.cssText = `right: ${widthOfHiddenItems + 35}px;`
        } else {
          rightArrow.classList.remove("d-none")
          leftArrow.classList.remove("d-none")
          rightValue += 200;
          scrollTabInner.style.cssText = `right: ${rightValue}px;`
        }
      })

      //left arrow click functionality
      leftArrow.addEventListener("click", () => {
        rightValue -= 200;
        scrollTabInner.style.cssText = `right: ${rightValue}px;`
        rightArrow.classList.remove("d-none")
        if (rightValue <= 0) {
          leftArrow.classList.add("d-none")
          rightArrow.classList.remove("d-none")
          scrollTabInner.style.cssText = `right: 0px;`
        }
      })
    })
     })
  </script>
</body>
</html>
赞(0）分享  回复(0）举报  2022-12-07
i5desfxk

i5desfxk4#

我使用Navs创建了一个水平滚动标签栏。
您可以查看下面代码here的工作演示。
CSS

.nav {
  overflow-x: auto;
  overflow-y: hidden;
  height: 115px;
}

.nav-item {
  cursor: pointer;
  margin: 15px 10px;
  width: 200px;
  height: 70px;
  box-shadow: 0 4px 6px -6px #222;
}

.nav-link {
  font-size: 14px;
  text-align: center;
}

.nav-item.selected {
  color: #fff;
  background-color: #007bff;
}

HTML语言

<div class="card">
  <div class="card-body">
    <ul class="nav flex-column nav-pills">
      <li class="nav-item selected">
        <span class="nav-link">HTML </span>
      </li>
      <li class="nav-item">
        <span class="nav-link">CSS</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">JS</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">React</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Angular</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Vue</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Bootstrap</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Tailwind</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Codepen</span>
      </li>
    </ul>
  </div>
</div>
赞(0）分享  回复(0）举报  2022-12-07
7z5jn7bk

7z5jn7bk5#

第一个

赞(0）分享  回复(0）举报  2022-12-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com