Bootstrap 4 –在移动设备上禁用选项卡功能

Question

我使用标准的Bootstrap 4标签，并希望这些标签在移动设备上“不受固定”。 “未标签”是指

1. 删除导航标签，然后
2. 彼此之间显示所有标签内容。

<div class="container">

  <ul class="nav nav-justified nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Tab 3</a>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Tab content 1</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab content 2</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab content 3</div>
  </div>

</div>

我想实现的目标

Answer 1

在下面的div上使用<div ng-show="showval && !showprd">Dev</div> <div ng-show="!showval && showprd">Prod</div> 类，并添加以下所示的样式。

d-none d-sm-flex

  <ul class="nav nav-justified nav-tabs d-none d-sm-flex" id="myTab" role="tablist">

@media screen and (max-width: 575px) {
  .tab-content>.tab-pane {
    display: block !important;
    opacity: 1 !important;
  }
}