垂直居中单选按钮 - React 和 Bootstrap答案

【问题标题】：Vertically center radio button - React and Bootstrap垂直居中单选按钮 - React 和 Bootstrap
【发布时间】：2020-11-14 14:21:52
【问题描述】：

我有一个容器，左侧有一个单选按钮，右侧有其他按钮。出于某种原因，我无法将单选按钮与右侧的按钮对齐。请告诉我解决此问题的方法。

这是我目前所拥有的：

代码：

import React, { Component } from "react";
import { Box, Flex } from "@rebass/grid";
import cx from "classnames";
import styled from "styled-components/macro";
import {
  Button,
  ButtonGroup,
  Classes,
  Colors,
  Divider,
  Icon,
  Radio,
  RadioGroup
} from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import "normalize.css/normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import "bootstrap/dist/css/bootstrap.css";

const ScenarioIcon = styled(Button)`
  transition: all 0.2s ease;
}
`;

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Flex>
        <Box width={"100%"}>
          <div
            style={{
              padding: "20px",
              backgroundColor: "red"
            }}
            className={cx("bp3-card bp3-interactive")}
          >
            <Flex alignItems="center" style={{ backgroundColor: "green" }}>
              <RadioGroup onChange={() => {}} selectedValue={1}>
                <Radio
                  style={{ backgroundColor: "yellow" }}
                  className={cx(Classes.TEXT_LARGE)}
                  label={"Sample"}
                  value={1}
                />
              </RadioGroup>
              <Box flex="auto" />
              <ButtonGroup>
                <ScenarioIcon
                  className="utility-button"
                  icon={<Icon icon={IconNames.EDIT} color={Colors.WHITE} />}
                  minimal={true}
                  title="Edit"
                />
                <ScenarioIcon
                  className="utility-button"
                  icon={
                    <Icon icon={IconNames.DUPLICATE} color={Colors.WHITE} />
                  }
                  minimal={true}
                  title="Copy"
                />
                <ScenarioIcon
                  className="utility-button"
                  icon={
                    <Icon
                      icon={IconNames.DOCUMENT_SHARE}
                      color={Colors.WHITE}
                    />
                  }
                  minimal={true}
                  title={"Archive"}
                />
                <ScenarioIcon
                  className="utility-button"
                  icon={
                    <Icon
                      icon={IconNames.TRASH}
                      color={Colors.RED1}
                      color={Colors.WHITE}
                    />
                  }
                  minimal={true}
                  title="Delete"
                />
                <Divider />
              </ButtonGroup>
              <Icon
                icon={IconNames.CHEVRON_RIGHT}
                color={Colors.WHITE}
                className="align-self-center"
                iconSize={20}
              />
            </Flex>
          </div>
        </Box>
      </Flex>
    );
  }
}

export default App;

代码沙盒链接：Link

P.S：我也愿意使用 bootstrap 进行对齐。

【问题讨论】：

标签： css reactjs twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

将margin-bottom: 0; 设置为label。

【讨论】：

【解决方案2】：

据我所知，Radio 有一些底部边距。如果您在“收音机”上使用以下样式，则效果很好。

style={{ backgroundColor: "yellow", marginBottom: "0" }}

【讨论】：