reactjs - 列中的 React-bootstrap 居中复选框

Question

我有一个 ListGroup 和 ListGroupItems，其中包含一些数据。该数据的一部分是描述，其长度明显不同。

<ListGroup className="signal-info-container">
  {
    signalConstants[this.props.signalType].map((signal, i) => (
      <ListGroupItem key={i}>
        <Row>
          <Col xs={3}>
            {signal.name}
          </Col>
          <Col xs={5}>
            {signal.description}
          </Col>
          <Col xs={3} className="aggregation">
            <Checkbox inline={true}></Checkbox>
            <Checkbox inline={true}></Checkbox>
            <Checkbox inline={true}></Checkbox>
            <Checkbox inline={true}></Checkbox>
          </Col>
        </Row>
      </ListGroupItem>
    ))
  }
</ListGroup>

有时该描述需要换行(如下所示)。

我希望发生的是右列中的复选框在列的中心垂直对齐。

我试图用一些自定义的 css 覆盖 react-bootstrap。以下 CSS 生成上一张图片。

.aggregation {
  display: flex;
  align-items: center;
}

不确定它有多相关，但列的高度为 0 像素。令我困惑的是为什么单行描述居中，而多行描述却不居中。这是 0px 列的图像:

我注意到似乎有某种标签应用于复选框，该标签由应用的 CSS 居中，但我需要将其应用于实际的复选框。我刚刚从我的复选框中删除了 title 属性。效果还是一样的(无论如何标签都没有出现)。

Answer 1

您需要申请display: flex; align-items: center;到整个 <tr>所以它识别多行描述。所以你应该添加一个类到<Row>使用这些规则。