css - 垂直居中单选按钮 - React 和 Bootstrap
问题描述
我有一个容器,左侧有一个单选按钮,右侧有其他按钮。出于某种原因,我无法将单选按钮与右侧的按钮对齐。请告诉我解决此问题的方法。
这是我到目前为止所拥有的:
代码:
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;
CodeSandbox 链接:链接
PS:我也愿意使用引导程序进行对齐。
解决方案
据我所知,Radio 有一些底部边距。如果您在“收音机”上使用以下样式,则效果很好。
style={{ backgroundColor: "yellow", marginBottom: "0" }}
推荐阅读
- git - 为什么带有 push 的 git 别名不起作用?
- python - AWS lambda update_thing_shadow 规则问题
- vba - Excel VBA:停止一段代码(正确)
- matlab - MATLAB - 如何梳理()单元格?
- c++ - 在 C++ 中,如何在头文件中声明一个数据结构,而它是在源文件中定义的?
- javascript - React 路由器 4 为所有路由渲染相同的组件
- cuda - 如何跨内核调用将数据保存在快速 GPU 内存(l1/共享)中?
- gradle - 使用 Kotlin 版本 1.2+,但仍然收到有关 `use` 的编译器错误
- javascript - 我画布上的正方形出现了一秒钟然后消失了
- sql - 在删除客户上创建一个触发器,显示一条消息“客户编号 217 已删除”