文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Bootstrap 5选项卡窗格不能正常使用flexbox

问Bootstrap 5选项卡窗格不能正常使用flexbox
EN

Stack Overflow用户
提问于 2021-02-05 23:38:23
回答 1查看 404关注 0票数 0

我使用的是直接从Docs页面设置的基本引导程序5标签(药丸)：

代码语言：javascript
复制
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

然后我用floating-divs填充tab-panes：

代码语言：javascript
复制
.floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {  
  background-color: green;  
}

.pane-2 {  
  background-color: orange;  
}

.pane-3 {  
  background-color: blue;  
}

到目前为止，一切都像预期的那样工作- JsFiddle。

然后，我将标准bootstrap的flexbox类应用于tab-pane，以使选项卡内容与我喜欢的d-flex flex-wrap justify-content-between对齐。

这就是整个事情走下坡路的地方- JsFiddle。

第一个tab-pane中的内容布局方式正是我所追求的，但出于某种原因，所有其他tab-pane中的内容都被下移了。不仅如此，仔细观察，似乎每个tab-pane都包含了所有应该分布在3个不同div上的floating-div，其中一些是看不见的……

现在我的问题是:我的CSS或者我使用Bootstrap的flexbox类的方式有问题吗，或者是Bootstrap中的bug？

javascript
css
twitter-bootstrap
flexbox
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-08 16:38:55

因为".d-flex“属性附带了"display: flex! Important”说明符。

但是".tab-content> .tab-pane“只使用"display: none”格式。在这种情况下，".d-flex“将占主导地位，并且在所有情况下都将保持为"display: flex”。

另一方面，由于"opacity: 0“是看不见的，但它会占用空间。

为了解决这个问题，

方法1：

在".tab-pane“中创建一个新元素。

代码语言：javascript
复制
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="d-flex flex-wrap justify-content-between">
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>  
</div>
</div>

方法二：

编写一个新类。".d-maybe-flex“

代码语言：javascript
复制
.d-maybe-flex
{
  display: flex;
}
代码语言：javascript
复制
<div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>  
</div>

示例1

​

代码语言：javascript
复制
.floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {
  background-color: green;
}

.pane-2 {
  background-color: orange;
}

.pane-3 {
  background-color: blue;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
    </div>
  </div>
</div>

​

示例2

​

代码语言：javascript
复制
.d-maybe-flex {
  display: flex
}

.floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {
  background-color: green;
}

.pane-2 {
  background-color: orange;
}

.pane-3 {
  background-color: blue;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
  </div>
  <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
  </div>
  <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
  </div>
</div>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66066150

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档