使用Flex实现复选框左对齐：中等分辨率适配问题求助

当前使用Flex布局展示复选框，已适配大、小分辨率，但中等分辨率下复选框无法左对齐，需要调整布局让所有复选框保持左对齐。

原代码 #

export default function App() {
  return (
    <Row className="py-3">
      <Col className="col-3 mx-1">
        <Row>
          <Col>
            <b>FIFA 2022 QUALIFIERS</b>
          </Col>
        </Row>
      </Col>

      <Col className="col-2">
        <Row>
          <Col>
            <span>&nbsp;&nbsp;All&nbsp;&nbsp;</span>
            <Input type="checkbox" />
          </Col>
        </Row>
      </Col>
      <Col>
        <Row className="d-flex">
          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;ARG</span>
          </Flex>
        </Row>
      </Col>
    </Row>
  );
}

解决方案及修改代码 #

问题核心是中等分辨率下列布局宽度分配不明确，且Flex容器对齐方式未强制左对齐。以下是调整后的代码：

export default function App() {
  return (
    <Row className="py-3 align-items-center">
      <Col className="col-3 col-md-3 mx-1">
        <b>FIFA 2022 QUALIFIERS</b>
      </Col>

      <Col className="col-2 col-md-2 d-flex align-items-center">
        <span>&nbsp;&nbsp;All&nbsp;&nbsp;</span>
        <Input type="checkbox" />
      </Col>
      
      <Col className="col-7 col-md-7">
        <Row className="d-flex">
          <Flex className="justify-content-start">
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;ARG</span>
          </Flex>
        </Row>
      </Col>
    </Row>
  );
}

关键修改点 #

• 给最外层Row添加align-items-center，确保所有列内元素垂直居中对齐，避免错位
• 为每个Col补充中等分辨率响应式类col-md-*，明确各列在中等屏上的宽度占比，防止布局自动换行或宽度错乱
• 给包含"All"复选框的Col添加d-flex align-items-center，让文本和复选框在同一行垂直对齐，同时保持容器内元素左对齐
• 给Flex容器添加justify-content-start，强制中等分辨率下元素沿容器左侧对齐，覆盖默认对齐逻辑
• 移除内层不必要的Row和Col嵌套，减少布局层级，避免额外内边距或间距影响对齐效果

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