ブートストラップグリッドの項目が正しくレンダリングされない

Question

私はグリッドレイアウトのレスポンスブートストラップとコンポーネントのマテリアル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

のように見えます。画像上の高さが変化しているため、行内でクリアされません。

インスペクタですべての同じ寸法を指定すると、自動的に調整されます。

col-XX-XXにflex-boxなどのものを使用して、列の高さを同じにするか、イメージを同じサイズに解析する必要があります。

Answer 2

すべてのブラウザのサポートを強化するため、ブートストラップinbuilt .clearfixクラスを使用することをお勧めします。

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

これは、ブートストラップカラムラッピング機能を使用してレイアウトを作成する際に発生する一般的な問題です。これをよく理解するためにこの記事をチェックアウトしてください - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php