时间戳

首页 > 解决方案 > Bootstrap 5 选项卡窗格无法正确使用 flexbox

javascript - Bootstrap 5 选项卡窗格无法正确使用 flexbox

问题描述

我直接从文档页面使用准系统 Bootstrap 5 选项卡（药丸）设置：

<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>

tab-pane然后我用s填充floating-divs：

.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。

然后我将标准引导程序的 flexbox 类应用于tab-panes 以根据我的喜好对齐选项卡内容d-flex flex-wrap justify-content-between。

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

第一个内容的tab-pane布局方式是我所追求的，但由于某种原因，所有其他tab-panes 中的内容都被向下移动了。不仅如此，而且，在仔细检查时，似乎每个tab-panes 都包含floating-div应该分布在 3 个不同 div 中的所有 s，其中一些只是不可见的......

现在我的问题是：我的 CSS 或我使用 Bootstrap 的 flexbox 类的方式有问题，还是 Bootstrap 中的错误？

标签： javascriptcsstwitter-bootstrapflexbox

解决方案

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

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

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

为了解决这个问题，

方法一：

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

<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"

.d-maybe-flex
{
  display: flex;
}

<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

.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;
}
<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

.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;
}
<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>

推荐阅读