在 Gatsby 静态站点中使用 React-Bootstrap 时列换行

Question

即使 xs={..} 加起来为 12，行中的列也会换行。这发生在所有屏幕尺寸中。我检查了以下问题和错误报告，但它们没有帮助：

所以问题：Bootstrap xs columns wrap

盖茨比 Github 问题：https://github.com/gatsbyjs/gatsby/issues/17914

该问题的解决方法对我没有帮助。

版本：

• “盖茨比”：“^2.18.5”，
• "react-bootstrap": "^1.0.0-beta.16"
• “引导程序”：“^4.4.1”
• “反应”：“^16.12.0”，

代码片段：

    <React.Fragment>
      <Container>
        <Row>
          {
            tech["name"].map(db => {
              let icon = svgs[toLower(db)];
              return(
                <Col xs={colSize}>
                  <Container>
                    <Row>
                      <Col xs={4} style={{"maxHeight": "100px", "maxWidth": "100px"}}>
                        <img src={icon} alt={db}/>
                      </Col>
                      <Col xs={8}>
                        <h5>{db}</h5>
                      </Col>
                    </Row>
                  </Container>
                </Col>
              )
            })
          }
        </Row>
      </Container>
    </React.Fragment>

生成的 HTML：

第 4 列 (SQL Server) 环绕

元素在重新加载后正确呈现

网站链接：https://tokern.io/cheat_sheet/

Answer 1

您正在向框添加填充并使用默认的框大小调整模式。要了解为什么会出现问题，请查看 the box-sizing documentation on MDN 或 this article on box-sizing on CSS Tricks。

要解决此问题，请将box-sizing: border-box 添加到.col 声明中。