DialogButtonBox按钮显示为堆叠

.dialog-button-box {
    display: flex;
    flex-direction: row; /* 水平方向排列 */
}

@media (max-width: 600px) {
    .dialog-button-box {
        flex-direction: column; /* 在小屏幕上垂直排列 */
    }
}

function adjustButtonLayout() {
    const buttonBox = document.querySelector('.dialog-button-box');
    if (window.innerWidth < 600) {
        buttonBox.style.flexDirection = 'column';
    } else {
        buttonBox.style.flexDirection = 'row';
    }
}

window.addEventListener('resize', adjustButtonLayout);
window.addEventListener('load', adjustButtonLayout);

import React from 'react';
import { ButtonGroup, Button } from 'react-bootstrap';

function DialogButtonBox() {
    return (
        <ButtonGroup vertical={window.innerWidth < 600}>
            <Button>确定</Button>
            <Button>取消</Button>
        </ButtonGroup>
    );
}

<template>
  <div :class="{ 'vertical': windowWidth < 600 }">
    <button>确定</button>
    <button>取消</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: window.innerWidth
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth;
    }
  }
};
</script>

<style>
.vertical button {
  display: block;
}
</style>