Question

有人可以帮我一下吗……无论我用下面的代码做什么，我似乎总是有三列，但我只想两列..我的意思是下面的内容显示在我的身上页面，它期望右边的另一个..因此看起来不是这样

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>

Answer 1

对于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>

Answer 2

该网格包含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>

reactjs和bootstrap列未对齐

2 个答案: