React-Bootsrap Col 额外间距右边

Question

我希望使用 react 和 react-bootstrap 将所有 corder 组件拉到屏幕的一角。 无论我尝试什么，包装 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>
  );

和角组件：

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} />
  );

}

Answer 1

添加position: absolute; .

改变这个...

<Col xs={2} lg={3} style={{padding : 0, right: 0, position: "fixed", bottom: 0, blockSize: "fit-content"}}>
  <Corner rotation="180" />
</Col>

...对此。

<Col xs={2} lg={3} style={{padding : 0, right: 0, position: "absolute", bottom: 0, blockSize: "fit-content"}}>
  <Corner rotation="180" />
</Col>