Question

我正在尝试使用Bootstrap 4创建一个标签式内容，这对我来说很新鲜。以下是我到目前为止的情况：

.tabbed-sidebar {
  margin-top: 1.5rem;
  border: 1px solid #d9d9d9;
  max-width: 320px;
  margin: 10px auto;
}

.tabbed-sidebar .tabbed-heading {
  color: #333;
  background-color: #fafafa;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #ccc;
  padding: 5px 5px 0 5px;
}

.tabbed-sidebar .nav-tabs {
  display: flex;
  border-bottom: none;
  margin-bottom: -1px;
}

.tabbed-sidebar .nav-tabs li {
 -webkit-flex: 1;
 -ms-flex: 1;
  flex: 1;
  padding-right: 1px;
}

.tabbed-sidebar .nav-tabs li a {
  text-decoration: none;
  color: #565656;
  display: block;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.tabbed-sidebar .nav-tabs li a.active {
  border-bottom: 1px solid #fff;
  background: #fff;
}

.tabbed-sidebar .tabs-content {
  background: #fff;
  border-radius: 0 0 3px 3px;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tabbed-sidebar">
  <div class="tabbed-heading">
    <ul class="nav nav-tabs">
      <li><a class="active" href="#popular" data-toggle="tab">Popular</a></li>
      <li><a href="#video" data-toggle="tab">Video</a></li>
      <li><a href="#topcomments" data-toggle="tab">Top comments</a></li>
    </ul>
  </div>
  <div class="tabs-content">
    <div class="tab-pane fade in active" id="popular">
      sqxq  
    </div>
    <div class="tab-pane fade" id="video">
      ssss
    </div>
    <div class="tab-pane fade" id="topcomments">
      dddd
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

据我所知，这个“标签内容”有 2个问题：

与有效标签对应的内容未在文档加载中显示;
与非活动标签对应的内容不会逐渐隐藏（淡出）。相反，它的不透明度设置为0.

我做错了什么？

Answer 1

首次发布： 与活动标签对应的内容未在文档加载中显示

来自Boostrap 4 Official Documentation

要使标签淡入，请将.fade添加到每个.tab-pane。第一个标签窗格还必须包含 .show 才能显示初始内容。

试试这个

<div class="tab-pane fade show in active" id="popular">

第二个问题： 与非活动标签对应的内容不会逐渐隐藏（淡出）。相反，它的不透明度设置为0.

在Bootstrap中，.fade过渡时间为0.15秒，因此您只需根据自己的意愿进行调整。例如：

.fade {
  opacity: 0;
  transition: opacity 1.15s linear;
}

这是fiddle

Bootstrap 4选项卡式内容无效

1 个答案: