使用bootstrap4 制作一个垂直排列的选项卡 点击不同的选项卡 右侧生成不同的内容

下面是一个使用 Bootstrap 4 制作垂直排列选项卡的示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">选项卡一</a>
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">选项卡二</a>
        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">选项卡三</a>
        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">选项卡四</a>
      </div>
    </div>
    <div class="col-md-9">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <h2>选项卡一内容</h2>
          <p>这里是选项卡一的内容。</p>
        </div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
          <h2>选项卡二内容</h2>
          <p>这里是选项卡二的内容。</p>
        </div>
        <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
          <h2>选项卡三内容</h2>
          <p>这里是选项卡三的内容。</p>
        </div>
        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
          <h2>选项卡四内容</h2>
          <p>这里是选项卡四的内容。</p>
        </div>
      </div>
    </div>
  </div>
</div>

这段代码中，使用了 `nav` 和 `tab-content` 两个组件来实现垂直排列选项卡的效果。

首先，通过 `nav-pills` 类为导航添加了选项卡样式，而 `flex-column` 类则将导航设置为垂直排列。

每一个选项卡项都是一个 `a` 元素，通过 `data-toggle` 和 `href` 属性来实现切换选项卡的效果，`aria-controls` 属性可以将选项卡与内容区块关联起来。

内容区块则是一个 `div` 元素，通过 `tab-pane` 类和 `fade` 类来实现选项卡内容的隐藏和显示效果，`show` 类则用于设置默认显示的选项卡。

最后，通过 `tab-content` 元素的 `id` 属性和内容区块的 `id` 属性来将导航和内容区块关联起来。