如何在react-bootstrap中将宽度设为60%的container居中显示

实现方案 #

你可以根据需求选择以下任意一种方法实现：

方法1：自定义Container样式（更符合Bootstrap设计规范，推荐） #

不需要修改Row的默认属性，直接调整Container的样式即可：

1. 去掉Container上的fluid属性（该属性会强制容器占满父级100%宽度，覆盖自定义宽度设置），给Container添加自定义类名：

<Container className="custom-container">
  <Row className="roomfac fontReg">
    {/* 原有Col代码保持不变 */}
  </Row>
</Container>

2. 添加对应CSS样式，覆盖Bootstrap默认的容器宽度限制：

.custom-container {
  max-width: 60% !important;
  margin: 0 auto;
}

方法2：保持现有给Row加样式的写法 #

你当前的样式不生效是因为Bootstrap默认给Row设置了左右负边距，优先级比你写的自定义样式高，修改CSS如下即可：

.roomfac {
  width: 60%;
  margin: 0 auto !important;
  padding: 0 15px; /* 补回默认gutter间距，避免内容贴边 */
}

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