React Bootstrap组件右侧边距间隙无法消除问题求助

问题出在React Bootstrap几个组件的默认样式上：

• Container默认带有左右内边距，且默认是固定宽度容器，不会占满父级全宽
• Row默认设置了负的左右外边距
• Col默认带有左右内边距

你可以按以下步骤修改代码来消除右侧间隙：

1. 改用Fluid容器替换默认Container #

默认Container是固定宽度，改用<Container fluid>能让容器自适应视口宽度，再清除它的默认内边距：

2. 清除Row和Col的默认间距 #

Row的负外边距和Col的内边距也会产生额外间隙，需要一并清除。

修改后的完整代码：

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function CloverMap() {
  return (
    <Container fluid style={{ margin: 0, padding: 0 }} className="mapContainer">
      <header className='tableHead'>Where We Are</header>
      <Row className="tableContent" style={{ margin: 0 }}>
        <Col style={{ padding: 0 }}>
          <p>Parking Area x 2</p>
          <p>Address</p>
          <p>telephone number</p> 
        </Col>
      </Row>
    </Container>
  );
}

export default CloverMap;

3. CSS辅助调整（可选） #

如果行内样式优先级不够，可以在app.css里添加强制样式：

.mapContainer {
  background-color: /* 你的背景色值 */;
  margin: 0 !important;
  padding: 0 !important;
}

.tableContent {
  margin: 0 !important;
}

.tableContent .col {
  padding: 0 !important;
}

这样就能彻底消除组件右侧的边距间隙，同时保留响应式特性。

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