bootstrap grid items werden nicht korrekt dargestellt

Question

Ich benutze React-Bootstrap für Resposinve Grid-Layout und Material-Ui für Komponente. Ich möchte 3 Elemente pro Zeile anzeigen und meine erste Zeile funktioniert wie erwartet, aber die nächste Zeile verhält sich abnormal. Warum ist das so? Hier ist mein Code

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> 
); 
} 

Derzeit sieht es so aus angehängtem Bild

Answer 1

Dies verursacht wird, um die Bilder kaufen nicht alle exakt die gleichen Abmessungen zu sein. Die unterschiedliche Höhe der Bilder bewirkt, dass sie sich nicht innerhalb der Reihe auflösen.

Beachten Sie, im Inspektor, wenn Sie ihnen alle die gleichen Abmessungen geben wird es automatisch ausrichten.

Sie müssen die col-XX-XX auf ihnen verwenden etwas wie flexbox, um die Höhe der Spalten oder die Bilder auf die gleiche Größe zu parse.

Answer 2

Ich würde vorschlagen, dass Sie die eingebaute Bootstrap .clearfix Klasse für besseren Support über den gesamten Browser verwenden. Setzen Sie den folgenden div Block nach jedem dritten Block:

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

Dies ist ein häufiges Problem, das auftritt, während das Layout der Erstellung der Bootstrap Spaltenumbruch-Funktion. Zur Kasse gehen, um den Artikel besser zu verstehen - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php