引導程序網格項目無法正確顯示

Question

我正在使用react-bootstrap爲組件resposinve網格佈局和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

這正在導致買不是所有的確切尺寸相同的圖像。圖像上的變化高度導致它們在行內不清晰。

請注意，在檢查員中，如果您給他們所有相同的尺寸，它會自動對齊。

您將需要使col-XX-XX在其上使用諸如flexbox之類的東西來平衡列高或使圖像解析爲相同的大小。

Answer 2

我建議你使用bootstrap內置的.clearfix類，以更好地支持所有的瀏覽器。將下面的div塊每一個第三塊後：

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

這是一個常見的問題是在使用引導柱纏繞功能創建佈局發生。結帳這篇文章更好地理解它 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php