如何使用html CSS bootstrap JavaScript在右侧显示选项卡

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- 左侧内容 -->
    </div>
    <div class="col-md-4">
      <ul class="nav nav-tabs" id="myTabs">
        <li class="active"><a href="#tab1">选项卡1</a></li>
        <li><a href="#tab2">选项卡2</a></li>
        <li><a href="#tab3">选项卡3</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <!-- 选项卡1内容 -->
        </div>
        <div class="tab-pane" id="tab2">
          <!-- 选项卡2内容 -->
        </div>
        <div class="tab-pane" id="tab3">
          <!-- 选项卡3内容 -->
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
  var myTabs = new bootstrap.Tab(document.getElementById('myTabs'));
  myTabs.show();
</script>