bootstrap 网格项未正确呈现

Question

我正在使用 react-bootstrap 来响应网格布局，并使用 material-ui 作为组件。我想每行显示 3 个项目，我的第一行按预期工作，但下一行行为异常。为什么？这是我的代码

const Content = ({restaurant}) => {
  const restaura = _.map(restaurant, (restaurant) => {
    return(
      <Col xs={12} sm={12} md={4}>
        <div className="card">
            <div className="card-image waves-effect waves-block waves-light">
            <Link to={"restaurant/" + restaurant.slug}>  {restaurant.image ?
                              <img src={restaurant.image} alt={restaurant.name} className="activator responsive-img"/>
                              :<img className="activator" src="" />}
            </Link>
            </div>
            <div className="card-content">
            <Link to={"restaurant/" + restaurant.slug}><span className="card-title activator grey-text text-darken-4">{restaurant.name}</span></Link>
            </div>
        </div>
      </Col>
    );
  });
  return(
    <div className="container-fluid">
      <div className="row">
        <h3 className="flow-text">Collections</h3>
      </div>
        <div>
          <Grid>
            <Row className="restaura show-grid">
              {restaura}
            </Row>
          </Grid>
        </div>
      </div>
  );
}

目前看起来像附加图片

Answer 1

这是由于购买的图像尺寸不完全相同造成的。图像上的不同高度导致它们在行内不清晰。

注意，在检查器中，如果你给它们所有相同的尺寸，它会自动对齐。

您需要使用诸如 flexbox 之类的东西使它们上的 col-XX-XX 等于列高或使图像解析为相同的大小。

Answer 2

我建议您使用 bootstrap 内置 .clearfix class 以获得对所有浏览器的更好支持。在每三个块之后放置以下 div 块：

<div class="clearfix visible-md-block"></div>

这是使用 Bootstrap 分栏环绕功能创建布局时出现的常见问题。查看这篇文章以更好地理解它 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

bootstrap 网格项未正确呈现

bootstrap grid items are not rendering correctly

javascript

twitter-bootstrap

reactjs

react-bootstrap