React-bootstrap复选框在列中居中

Question

我有一个带有ListGroupItems的ListGroup，它由一些数据填充。数据的一部分是描述，它的长度显然是不同的。

<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;
}

不确定它有多相关，但是列的高度是0px。让我困惑的是为什么单行描述居中，而多行描述不居中。下面是0px协议的图像：

​

​

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

Answer 1

您需要对整个<tr>应用display: flex; align-items: center;，这样它才能识别多行描述。因此，您应该向使用这些规则的<Row>添加一个类。

Answer 2

尝试修改组件，如下所示：

<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}>
            <CheckboxRow>
              <Checkbox title='min' inline={true}></Checkbox>
              <Checkbox title='max' inline={true}></Checkbox>
              <Checkbox title='avg' inline={true}></Checkbox>
              <Checkbox title='sum' inline={true}></Checkbox>
            </CheckboxRow>
          </Col>
        </Row>
      </ListGroupItem>
    ))
  }
</ListGroup>

CheckboxRow在哪里

const CheckboxRow = ({children}) => (
  <div style={
    "display": "flex",
    "justify-content": "center",
    "align-items": "center"
  }>
    {children}
  </div>
)

或者将该CSS提取到样式表中。

添加额外的div层的原因是，它比试图覆盖列组件上的样式更安全，因为它的目的不是水平放置元素。

“justify-content:center”将项目水平居中，“align- items :center”将项目垂直居中。