在Bootstrap 4选项卡中对齐关闭图标

，可以通过以下步骤实现：

在HTML文件中引入Bootstrap的CSS和JS文件，确保正确加载Bootstrap框架。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

创建一个选项卡布局的HTML结构，使用Bootstrap的nav和tab类。例如：

<ul class="nav nav-tabs">
  <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="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade show active">
    <h3>Home</h3>
    <p>This is the Home tab.</p>
  </div>
  <div id="profile" class="tab-pane fade">
    <h3>Profile</h3>
    <p>This is the Profile tab.</p>
  </div>
  <div id="messages" class="tab-pane fade">
    <h3>Messages</h3>
    <p>This is the Messages tab.</p>
  </div>
  <div id="settings" class="tab-pane fade">
    <h3>Settings</h3>
    <p>This is the Settings tab.</p>
  </div>
</div>

在每个选项卡的标题（<a>标签）内添加一个关闭图标。可以使用Bootstrap的close类和×符号来创建一个可关闭的图标按钮。

<a class="nav-link active" data-toggle="tab" href="#home">
  Home <span class="close">&times;</span>
</a>

使用CSS样式来对齐关闭图标。可以通过自定义样式或使用Bootstrap提供的样式类来实现。

/* 自定义样式 */
.nav-link .close {
  float: right;
  margin-top: -2px;
}

/* 使用Bootstrap样式类 */
.nav-link .close {
  float: none;
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0.5rem;
}

完整的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <style>
    .nav-link .close {
      float: right;
      margin-top: -2px;
    }
  </style>
  <title>Bootstrap 4选项卡</title>
</head>
<body>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">
        Home <span class="close">&times;</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile">
        Profile <span class="close">&times;</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#messages">
        Messages <span class="close">&times;</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#settings">
        Settings <span class="close">&times;</span>
      </a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade show active">
      <h3>Home</h3>
      <p>This is the Home tab.</p>
    </div>
    <div id="profile" class="tab-pane fade">
      <h3>Profile</h3>
      <p>This is the Profile tab.</p>
    </div>
    <div id="messages" class="tab-pane fade">
      <h3>Messages</h3>
      <p>This is the Messages tab.</p>
    </div>
    <div id="settings" class="tab-pane fade">
      <h3>Settings</h3>
      <p>This is the Settings tab.</p>
    </div>
  </div>
</body>
</html>

这样就可以在Bootstrap 4选项卡中对齐关闭图标了。你可以根据实际需要进一步调整样式和布局。如果想要了解更多Bootstrap的使用方法，可以参考腾讯云的产品腾讯云开发者手册 - Bootstrap。