React Bootstrap ButtonToolbar 没有将按钮分开

Question

我在使用 react-bootstrap 中的 ButtonToolbar 组件将两个按钮分开时遇到问题。我希望这两个按钮间隔开，但我不确定我需要对样式做些什么。根据documentation，我所做的应该足够了。

我已经尝试将 ButtonToolbar 的类名更改为 justify-content-between，但这会将按钮分隔到列的两端。

          <ButtonToolbar style={{ marginTop: "17.5px" , }}>
            <Button
              size="sm"
              onClick={() => {
                setUndoPlayToggle(!undoPlayToggle);
                setPauseVariable(true);
              }}
              disabled={pitchStateLogs.length === 0}
            >
              Undo Play
            </Button>
            <Button size="sm">View Stats</Button>
          </ButtonToolbar>

Answer 1

您只需在左侧按钮上添加一个 class 边距 (mr-2)：

或者从 0 到 5 中选择任何 bootrap margin：

<ButtonToolbar style={{ marginTop: "17.5px" }}>
  <Button
    size="sm"
    className="mr-2"
    onClick={() => {
      setUndoPlayToggle(!undoPlayToggle);
      setPauseVariable(true);
    }}
    disabled={pitchStateLogs.length === 0}
  >
    Undo Play
  </Button>
  <Button size="sm">View Stats</Button>
</ButtonToolbar>;

实时工作示例：