React-Bootstrap Col右侧多余间距致Corner组件无法贴边求助

使用React和React-Bootstrap开发时，希望将所有Corner组件固定在屏幕角落，但包裹SVG的Col组件右侧存在多余间距，左侧角落组件正常，右侧组件无法贴紧屏幕边缘。尝试过设置right:0、修改Col尺寸、覆盖容器CSS、调整box-sizing等方法，均未解决问题。

父组件代码 #

return (
  <div>
    {error && <Alert variant="danger">{error}</Alert>}
    {searchParams.get("user") != null &&
      <svg onClick={redirectAccount} width="60px" height="60px" style={{ position: "fixed", right : "48%", padding : "10px"}} viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="0.00024000000000000003">
        <g id="SVGRepo_bgCarrier" stroke-width="0"/>
        <g id="SVGRepo_iconCarrier"> <g id="style=doutone"> <g id="add-box"> <path id="vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.25 8C1.25 4.27208 4.27208 1.25 8 1.25H16C19.7279 1.25 22.75 4.27208 22.75 8V16C22.75 19.7279 19.7279 22.75 16 22.75H8C4.27208 22.75 1.25 19.7279 1.25 16V8ZM8 2.75C5.10051 2.75 2.75 5.10051 2.75 8V16C2.75 18.8995 5.10051 21.25 8 21.25H16C18.8995 21.25 21.25 18.8995 21.25 16V8C21.25 5.10051 18.8995 2.75 16 2.75H8Z" fill="#000000"/> <path id="vector (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M12 7.00744C12.4142 7.00744 12.75 7.34323 12.75 7.75744L12.75 16.2427C12.75 16.6569 12.4142 16.9927 12 16.9927C11.5857 16.9927 11.25 16.6569 11.25 16.2427L11.25 7.75743C11.25 7.34322 11.5858 7.00744 12 7.00744Z" fill="#BFBFBF"/> <path id="vector (Stroke)_3" fill-rule="evenodd" clip-rule="evenodd" d="M17 12C17 12.4142 16.6642 12.75 16.25 12.75L7.76476 12.75C7.35055 12.75 7.01476 12.4142 7.01476 12C7.01477 11.5857 7.35055 11.25 7.76477 11.25L16.25 11.25C16.6642 11.25 17 11.5858 17 12Z" fill="#BFBFBF"/> </g> </g> </g>
      </svg>
    }
    <div id='wrapper'>
      <EditQuotes showEdit={ showEdit } database={barz} handleShowEdit={handleShowEdit} showAdd={handleShowAdd}/>
    </div>
    <div id='wrapper'>
      <NewQuote shown={showAdd} handleShowEdit={handleShowEdit} handleShown={handleShowAdd}/>
    </div>
    <Container fluid style={container}>
      <UseScreenOrientation/>
      <Row>
        <Col xs={2} lg="auto" style={{padding : 0}}>
          <Corner rotation="0" />
        </Col>
        <Col>
          {searchParams.get("user") === null &&
            <Topnav setDataBase={handleDataBase} showEdit={handleShowEdit}/>
          }
        </Col>
        <Col xs={2} lg="auto" style={{padding : 0}}>
          <Corner rotation="90"/>
        </Col>
      </Row>

      <Row >
        <QuoteContainer dataBase={dataBase} quote={barz[ranInt].data} />
      </Row>

      <Row>
        <Col xs={2} lg={3} style={{padding : 0}} className="fixed-bottom">
          <Corner rotation="270"/>
        </Col>
        <Col className='text-center'>
          <Button onClick={genRanInt}>Refresh</Button>
        </Col>
        <Col xs={2} lg={3} style={{padding : 0, right: 0, position: "fixed", bottom : 0, blockSize: "fit-content"}}>
          <Corner rotation="180" />
        </Col>
      </Row>
    </Container>
  </div>
);

Corner组件代码 #

import { ReactComponent as CornerImg } from '../img/corner.svg';

export default function Corner(props) {

  const style = {
    transform: "rotate(" + props.rotation + "deg)",
    width: "70%",
    height: "auto",
  };

  return (
    <CornerImg style={style} />
  );

}

1. 脱离Grid布局直接固定Corner组件 #

Bootstrap的Col属于Grid系统，自带flex布局规则，强行给Col加position:fixed会和Grid的布局逻辑冲突，导致间距残留。直接移除包裹Corner的Col，给Corner组件本身添加固定定位：

修改父组件中右上角Corner的代码：

// 移除原Col，直接添加Corner
<Corner rotation="90" style={{ position: "fixed", top: 0, right: 0 }} />

右下角Corner同理：

<Corner rotation="180" style={{ position: "fixed", bottom: 0, right: 0 }} />

2. 调整SVG的样式消除间距 #

SVG默认是行内元素，可能自带额外间距，同时当前设置的width:70%会让它无法填满角落空间。修改Corner组件的样式：

export default function Corner(props) {
  const style = {
    transform: `rotate(${props.rotation}deg)`,
    width: "100px", // 根据需求设固定尺寸，或设为100%
    height: "auto",
    display: "block", // 消除行内元素间距
    margin: 0,
    padding: 0
  };

  return <CornerImg style={style} />;
}

3. 保留Col时强制清除Grid样式（备选） #

如果必须保留Col包裹，需要覆盖Col的所有默认布局样式，避免flex布局影响：

<Col style={{
  padding: 0,
  margin: 0,
  width: "auto",
  flex: "none", // 取消flex项的自动拉伸/收缩
  position: "fixed",
  right: 0,
  bottom: 0
}}>
  <Corner rotation="180" />
</Col>

内容的提问来源于stack exchange，提问作者Tim Angevare