0
votes

Cartes amicales mobiles dans réagir JS

J'ai un tableau d'objets contenant le nom et la description. Le nom est court et peu de chariots. Mais la description peut être différente de la longueur. Je veux afficher ces données à l'intérieur des cartes dans mon projet de réact. J'ai essayé d'utiliser React-Bootstrap.

Ce que je veux faire, c'est que je veux montrer des cartes avec la même hauteur et la même longueur, quel que soit les détails à l'intérieur. Et si l'espace d'une rangée n'est pas suffisant pour toutes les cartes, alors il devrait aller à la ligne suivante.

Je veux que cette structure se comporte comme le col de rangée en bootstrap.

Comment puis-je faire cela dans réagir JS? Utilisation de React-Bootstrap ou de tout autre composant?

javascript reactjs css react-bootstrap

0 commentaires

3 Réponses :

0
votes

J'ai utilisé Bulma pendant un petit projet, je jouais à un moment donné et cela m'a aidé à faire exactement comme vous l'avez décrit.

https://bulma.io/documentation/composants/card/

0 commentaires

0
votes

J'utilise ceci:

1. Container - flex-direction: row
2. Item - max-height and width
3. Item inner - use padding or for example width: 90%. All limits and sizes define in this component. It will prevent different sizes of columns.

1 commentaires

Merci pour le commentaire. Il était plus facile d'utiliser cette solution avec mon code existant.

0
votes

Vous pouvez utiliser flexbox code> pour les cases de hauteur égales

p>



<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
      <a href="">Link</a>
    </div>
  </li>
    
     <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore reprehenderit, culpa obcaecati!</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste, numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
      <a href="">Link</a>
    </div>
  </li>

  
    <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae esse dolore corporis velit fugiat ipsam tempore optio dicta. Magnam iusto facere, maxime! Praesentium quo laborum, deserunt adipisci. Ipsam officia delectus repudiandae, aperiam magnam blanditiis fuga similique.</p>
      <a href="">Link</a>
    </div>
  </li>
</ul>

0 commentaires