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>

有时候描述需要包装（如下所示）。

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

我尝试使用一些自定义css覆盖react-bootstrap。以下css导致上一张图像。

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

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

我注意到似乎有一些标签应用于复选框，它被应用的CSS集中，但我需要将它应用于实际的复选框。我刚从复选框中删除了title属性。效果仍然相同（标签没有显示出来）。

Answer 1

您需要将display: flex; align-items: center;应用于整个<tr>，以便识别多行描述。因此，您应该向使用这些规则的<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图层的原因是，它比尝试覆盖列组件上的样式更安全，因为它的目的不是水平放置元素。

＆＃39;证明 - 内容：中心＆＃39;将项目水平居中，＆＃39; align-items：center＆＃39;使项目垂直居中。

列中的React-bootstrap居中复选框

2 个答案: