ブートストラップグリッドアイテムが正しくレンダリングされない

グリッドレイアウトの再配置には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>
  );
}

現在添付画像のようです