Mam tablicę obiektów, które zawierają nazwę i opis. Nazwa jest krótka i ma kilka znaków. Ale opis może mieć różną długość. Chcę wyświetlić te dane w Card w moim projekcie React. Próbowałem użyć reakcji-bootstrap.

Chcę tylko pokazać karty o tej samej wysokości i długości, niezależnie od znajdujących się w nich szczegółów. A jeśli miejsce w jednym rzędzie nie wystarcza na wszystkie karty, należy przejść do następnej linii.

Chcę, aby ta struktura zachowywała się jak row-col w programie bootstrap.

Jak to zrobić w React js? za pomocą React-bootstrap lub innego komponentu?

enter image description here

0
Dima 2 kwiecień 2020, 17:01

3 odpowiedzi

Najlepsza odpowiedź

Używam tego:

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.

Oto przykład https://codepen.io/team/css-tricks/pen/EKEYob - niż zdefiniować element wewnętrzny z określonymi rozmiarami

/ Zdefiniuj element komponentu i po prostu zmapuj tablicę z obiektami.

Jeśli chcesz skorzystać z reakcji, zaimportuj bibliotekę Bootstrap i użyj jej komponentów

0
vjanovec 2 kwiecień 2020, 14:20

Użyłem bulmy podczas małego projektu, nad którym kiedyś się bawiłem i pomogło mi to zrobić dokładnie tak, jak opisałeś.

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

0
Charles Korpics 2 kwiecień 2020, 14:07

Możesz użyć flexbox dla pól o równej wysokości

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  display: flex; 
  padding: 0.5em;
  width: 33.33%;
}

.list-content {
   display: flex;
   flex-direction: column;
   background-color: #fff;
   padding: 1em;
   width: 100%;
}
.list-content p {
  flex: 1 0 auto;
}
<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
Zohaib Ijaz 2 kwiecień 2020, 14:21