javascript - React Bootstrap ButtonToolbar 不将按钮分开

Question

我在ButtonToolbar使用react-bootstrap. 我希望这两个按钮分开，但我不确定我需要对样式做些什么。根据文档，我所做的应该就足够了。

我尝试将 className 更改为ButtonToolbarto ，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>

标签： javascriptcssreactjstwitter-bootstrapreact-bootstrap

Answer 1

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

或者从 0 到 5 中选择您选择的任何bootrap 边距：

<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>;

现场工作示例：