3

标签和状态的文本中心与按钮文本的中心不对齐。我正在使用反应引导。图片比文字更能说明问题：

在此处输入图像描述

如何对齐中心，我尝试了一个样式表，如：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>
4

0 回答 0