使用react-bootstrap布局时Row和Col出现边框的问题排查

云原生阿岚

2026-7-31

问题原因及解决方案

核心问题分析

网格结构不规范：React-Bootstrap的Row组件要求直接子元素必须是Col组件，你第二个Row里直接放了<ListGroup>，这种错误嵌套会导致Bootstrap网格样式异常，甚至触发意外边框。
CSS写法错误：你用的border: no是无效语法，正确的写法应该是border: none。
边框来源混淆：从截图看，这些边框更可能是ListGroup.Item的默认样式，而非Row/Col自带的，之前样式没生效也和结构错误有关。

修正步骤

1. 修复网格结构

把第二个Row里的所有内容都用Col包裹，确保Row的直接子元素只有Col组件。

2. 针对性去除边框

如果要去掉ListGroup.Item的默认边框，给它添加border: none样式；如果确认是Row/Col的边框，同样用这个属性覆盖。

修正后的代码示例

return (
  <Container fluid>
    <Row>
      <div className="image-container">
        <img src={gameDetails.background_image} className="img-fluid" />
      </div>
    </Row>
    <Row>
      <Col>
        <ListGroup>
          <ListGroup.Item style={{border: 'none'}}>
            <span
              style={{
                fontFamily: "Staatliches",
                fontSize: "20px",
              }}
            >
              Name:
            </span>{" "}
            {gameDetails.name}
          </ListGroup.Item>
        </ListGroup>
      </Col>
      <Col>
        <ListGroup>
          <ListGroup.Item style={{border: 'none'}}>
            <span
              style={{
                fontFamily: "Staatliches",
                fontSize: "20px",
              }}
            >
              Release Date:
            </span>{" "}
            {gameDetails.released}
          </ListGroup.Item>
        </ListGroup>
      </Col>
      <Col></Col>
    </Row>
  </Container>
);
}

export default GameDesc;