bootstrap-4 - 在移动视图中将导航项更改为手风琴

Question

这就是我现在所拥有的

<ul class="nav nav-tabs mb-1" role="tablist">
  <li class="nav-item mr-2">
    <a style="border-radius:0px" class="nav-link" id="tab1_link" href="#tab1" aria-controls="tab1" data-toggle="tab">tab1</a>
  </li>
  <li class="nav-item mr-2">
    <a style="border-radius:0px" class="nav-link" id="tab2_link" href="#tab2" aria-controls="tab2" data-toggle="tab">tab2</a>
  </li>
  <li class="nav-item mr-2">
    <a style="border-radius:0px" class="nav-link" id="tab3_link" href="#tab3" aria-controls="tab3" data-toggle="tab">tab3</a>
  </li>
</ul>

<div id="pubcontent" class="tab-content container border">
  <br>
  <div role="tabpanel" class="tab-pane" id="tab1">
    TAB 1
  </div>
    <div role="tabpanel" class="tab-pane" id="tab2">
    TAB 2
  </div>
    <div role="tabpanel" class="tab-pane" id="tab3">
    TAB 3
  </div>
</div>

我在 bootstrap 4 中制作了这个选项卡

我是 CSS 的新手，所以我不太了解媒体查询

小提琴：https ://jsfiddle.net/kunz/cmhe45L0/6/

标签： bootstrap-4tabsaccordion

Answer 1

您可以创建标签页和手风琴，并根据您想要定位的屏幕尺寸切换可见性；无需为此编写媒体查询。

完整的工作片段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container d-none d-sm-block ">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>


<div class="container d-block d-sm-none">
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
                    HOME 
              </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                    Menu 1
            </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                    Menu 2
              </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
        </div>
      </div>
    </div>
  </div>
</div>