引导程序网格项目无法正确显示

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