用bootstrap4和jq写一个左右布局的tab栏切换,要求适配整个屏幕,带背景图片

以下是一个使用bootstrap4和jq实现左右布局的tab栏切换的示例代码：

HTML代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 bg-image">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="pill" href="#tab1">Tab 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#tab2">Tab 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#tab3">Tab 3</a>
        </li>
      </ul>
    </div>
    <div class="col-md-9">
      <div class="tab-content">
        <div class="tab-pane fade show active" id="tab1">
          <h4>Tab 1 Content</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare, sapien ut pretium bibendum, tortor nisi lacinia lectus, vel consequat nunc nulla vitae purus.</p>
        </div>
        <div class="tab-pane fade" id="tab2">
          <h4>Tab 2 Content</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare, sapien ut pretium bibendum, tortor nisi lacinia lectus, vel consequat nunc nulla vitae purus.</p>
        </div>
        <div class="tab-pane fade" id="tab3">
          <h4>Tab 3 Content</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare, sapien ut pretium bibendum, tortor nisi lacinia lectus, vel consequat nunc nulla vitae purus.</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码：

.bg-image {
  background-image: url('your-background-image-url');
  background-repeat: no-repeat;
  background-size: cover;
}

JavaScript代码：

$(document).ready(function(){
  $(".nav-link").click(function(){
    $(this).tab('show');
  });
});

在上面的代码中，我们使用了bootstrap4的栅格系统来实现左右布局，将左侧导航栏放在col-md-3中，右边的tab内容放在col-md-9中。我们使用了nav组件来实现导航栏，使用了tab组件来实现tab栏切换。我们在左侧导航栏的父元素上添加了一个背景图片，并设置了背景图片的重复模式和大小。最后，我们使用了jQuery来监听导航栏的点击事件，当点击导航栏中的某一项时，使用tab('show')方法来切换到对应的tab页。