vertical-bootstrap网格行中的垂直对齐内容

Question

标签和状态的文本中心未与按钮文本的中心对齐。我正在使用react-bootstrap。图片显示的问题比文本更好：

我如何对齐中心，我尝试了一个样式表，如：vertical-align with Bootstrap 3中所述，但这对于react-bootstrap不起作用

此外，条纹行可能很好地使内容在视觉上保持在一起。表可以做到这一点，但大多数设计人员说表是数据，而不是这些东西。

样式表：

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

JSX：

<Grid>
            <Row className="propRow">
                <Col sm={2} className="fieldLabel">Watson Installed:</Col>
                <Col sm={1} className="fieldLabel">{(WatsonInstalled) ? 'true' : 'false'}</Col>
                <Col sm={3}>
                    <Button bsStyle={(WatsonInstalled) ? 'warning' : 'primary'}
                        block onClick={(e) => buttonAction(e)}>
                        {(WatsonInstalled) ? 'UnInstall' : 'Install'}
                    </Button>
                </Col>
            </Row>
            <Row className="propRow">
                <Col sm={2} className="fieldLabel">Watson Running:</Col>
                <Col sm={1} className="fieldLabel">{(WatsonRunning) ? 'true' : 'false'}</Col>
                <Col sm={3}>
                    <Button bsStyle={(WatsonRunning) ? 'warning' : 'primary'}
                        block onClick={(e) => buttonAction(e)}>
                        {(WatsonRunning) ? 'Stop' : 'Run'}
                    </Button>
                </Col>
            </Row>
            <Row className="propRow">
                <Col sm={2} className="fieldLabel">FME Running:</Col>
                <Col sm={1} className="fieldLabel">{(FMERunning) ? 'true' : 'false'}</Col>
                <Col sm={3}>
                    <Button bsStyle={(FMERunning) ? 'warning' : 'primary'}
                        block onClick={(e) => buttonAction(e)}>
                        {(FMERunning) ? 'Stop' : 'Version Info'}
                    </Button>
                </Col>
            </Row>
        </Grid>