reactjs 和 bootstrap 列没有对齐答案

【问题标题】：reactjs and bootstrap columns not lining upreactjs 和 bootstrap 列没有对齐
【发布时间】：2019-08-10 21:28:01
【问题描述】：

有人可以帮我解释一下吗...无论我用下面的代码做什么，我似乎总是有三列，但我只想要两列.. 我的意思是下面显示的方式页面它期待右边的另一个..所以它看起来不像这样

COL 1 ..... 此处的空间........ COL 2

但是

COL 1 COL 2

    <Row className="show-grid text-center">
      <Col xs={12} sm={4} className="person-wrapper">
        <Image src="assets/image.jpg" circle className="profile-pic"/>
        <h3></h3>
      <Link to="/place">
        <Button bsStyle="primary">click</Button>
      </Link>
      </Col>
      <Col xs={12} sm={4} className="person-wrapper">
        <Image src="assets/image1.jpg" circle className="profile-pic"/>
        <h3></h3>
      <Link to="/place">
        <Button bsStyle="primary">click</Button>
      </Link>
      </Col>
    </Row>

【问题讨论】：

你写了我想要 COL1 COL2 但是得到 COL1 COL2 ，好吧，那有什么区别？
对不起格式不正确..我会编辑
在第二个 <Col> 上尝试 sm={{ span: 4, offset: 4 }}。来源：react-bootstrap.github.io/layout/grid/#responsive-grids 从来没有使用过带有 ReactJS 的 Bootstrap，所以我不知道它是否可以工作。告诉我们它是否有效！

标签： html reactjs bootstrap-4

【解决方案1】：

网格包含 12 列，而不是 8 列。您的两个 sm 列需要加起来为 12。使用 sm={6} 而不是 sm={4}

<Row className="show-grid text-center">
  <Col xs={12} sm={6} className="person-wrapper">
    <Image src="assets/image.jpg" circle className="profile-pic"/>
    <h3></h3>
  <Link to="/place">
    <Button bsStyle="primary">click</Button>
  </Link>
  </Col>
  <Col xs={12} sm={6} className="person-wrapper">
    <Image src="assets/image1.jpg" circle className="profile-pic"/>
    <h3></h3>
  <Link to="/place">
    <Button bsStyle="primary">click</Button>
  </Link>
  </Col>
</Row>

【讨论】：

【解决方案2】：

你应该为你想要覆盖的每个“分辨率”设置一个偏移量，在你的情况下为sm：

<Row className="show-grid text-center">
  <Col xs={12} sm={4} className="person-wrapper">
    {/* your content goes here */}
  </Col>
  <Col xs={12} sm={{ span: 4, offset: 4 }} className="person-wrapper">
    {/* your content goes here */}
  </Col>
</Row>

【讨论】：