Bootstrap开关与其他元素不同行？如何实现开关右对齐

换行原因 #

• Bootstrap 5的form-check默认是块级元素（display: block），会独占整行空间，因此会和前面的图标、标题自动换行。
• 你使用的form-inline和form-group是Bootstrap 4及更早版本的类，在Bootstrap 5中已被废弃，无法提供预期的行内布局效果。

实现同行且右对齐的方案 #

利用Bootstrap 5的flex布局工具类即可实现需求，具体步骤如下：

1. 调整HTML结构与类名 #

• 替换废弃的form-inline和form-group为Bootstrap 5的flex类：d-flex、align-items-center，实现元素垂直居中且同行排列。
• 给开关容器添加ms-auto类，让它自动推到容器右侧（ms-auto是margin-start:auto的缩写，实现flex布局下的右对齐）。
• 给form-check添加d-flex align-items-center，确保开关和文字垂直对齐。

2. 优化自定义CSS #

移除全局div { overflow: hidden; white-space: nowrap; }，避免影响其他元素布局；保留必要的自定义样式即可。

修改后的完整代码 #

CSS代码

.global-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  width: 1024px;
  background-color: purple;
  padding: 7px;
  margin: 0;
}

.contents svg {
  height: 25px;
  width: 25px;
  vertical-align: middle;
}

.contents .title {
  color: white;
  margin: 0;
  font-size: 16px;
  vertical-align: middle;
  margin-left: 15px;
}

HTML代码

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="global-wrap">
  <div class="header">
    <div class="contents d-flex align-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
      </svg>
      <span class="title">Title</span>
      <span class="form-check form-switch d-flex align-items-center ms-auto">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label ms-2" for="flexSwitchCheckDefault">Text</label>
      </span>
    </div>
  </div>
</div>

关键说明 #

• d-flex：将容器设置为flex布局，内部元素默认在一行排列。
• align-items-center：让flex容器内的元素垂直居中对齐。
• ms-auto：通过margin-left:auto（RTL环境下为margin-right:auto），让开关容器自动填充剩余空间，从而靠右对齐。
• 移除废弃的form-inline和form-group，避免布局冲突。

内容的提问来源于stack exchange，提问作者codecrazy46