Bootstrap, a pętla

Zielona szkoła
1

Witam, mam problem z bootstrapem. Chciałem zrobić aplikację w której tworzę pizze i po jej utworzeniu jest ona widoczna w menu. Chciałem zrobić to tak, żeby pizze się wyświetlały się obok siebie, jedna obok drugiej (użyłem kart). Niestety niezależnie co zrobię pizza wyświetla się jedna pod drugą. Wydaje mi sie, że może jest potrzebna jakaś pętla która będzie je wyświetlać jedna obok drugiej, gdy będą dodwane. Poniżej zamieszczam kod, który ustawia pizze jeden pod drugą.
Może trzeba go zmodyfikować.

  > <% @food_items.each do |food_item| %>
    > <div class="card-deck">
    >     <div class="card">
    >       <img class="card-img-top" <%= image_tag food_item.image_url(:thumb) %>>
    >       <div class="card-body">
    >         <h5 class="card-title"><%= food_item.name %></h5>
    >         <p class="card-text"><%= food_item.description %> <br> Średnia: <%= food_item.medium %> zł <br>Duża: <%= food_item.large %> zł</p>
    >       </div>
    >     </div>
<% end %>
2

Tu masz rozwiązanie:

https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

4

Użyłem tego w taki sposób i nadal nie działa.

<% @food_items.each do |food_item| %>

  <div class="row">
    <div class="col">
      <img class="card-img-top" <%= image_tag food_item.image_url(:thumb) %>>
      <div class="card-body">
      <h5 class="card-title"><%= food_item.name %></h5>  
      <p class="card-text"><%= food_item.description %> <br> Średnia: <%= food_item.medium %> zł <br>Duża: <%= food_item.large %> zł</p>
      </div>
    </div>
  </div>
5

Tak na szybko z pamięci napisałem prosty css który załatwi problem. Klasa box2 (zmieniłem tylko kolor) została utworzona aby pokazać Ci, że elementy zawijają się prawidłowo.

.box {
height: 50px;
width: 50px;
background-color: red;
margin-right: 10px;
margin-bottom: 10px;
display: inline-block;
}
.box2 {
background-color: green;
}

<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box box2">&nbsp;</div>
<div class="box box2">&nbsp;</div>
<div class="box box2">&nbsp;</div>
<div class="box box2">&nbsp;</div>
<div class="box box2">&nbsp;</div>
6

Obrazek z przykładu się nie chce załadować ale to działa na https://divtable.com/table-styler/
Wklej sobie podany przykład.

7

div class=“row” trzeba wrzucić przed pętlą

8

Zrobiłem to w ten sposób i nadal nic, elementy wyświetlają sie jeden pod drugim, tego css’a tez wkleiłem, ale nic nie dało.

  <div class="row">
    <% @food_items.each do |food_item| %>
    <div class="col">
      <div class="card-body" style="max-width: 18rem;">
      <img class="card-img-top"  <%= image_tag food_item.image_url(:thumb) %>>
      <h5 class="card-title"><%= food_item.name %></h5>  
      <p class="card-text"><%= food_item.description %> <br> Średnia: <%= food_item.medium %> zł <br>Duża: <%= food_item.large %> zł</p>
      </div>
    </div>
  </div>
9

Zamiast klasy col spróbuj wpisać np. col-3 (powinno to spowodować wyświetlenie czterech kart w rzędzie). Zwróć uwagę czy użyłeś bloku kontenera (‘container’ lub ‘container-fluid’) w którym dopiero tworzysz ‘row’.

Po tych zmianach kod wygląda tak:

<div class="container-fluid'>
  <div class="row">
    <% @food_items.each do |food_item| %>
    <div class="col">
      <div class="card-body" style="max-width: 18rem;">
        <img class="card-img-top"  <%= image_tag food_item.image_url(:thumb) %>>
        <h5 class="card-title"><%= food_item.name %></h5>  
        <p class="card-text"><%= food_item.description %> <br> Średnia: <%= food_item.medium %> zł <br>Duża:        <%= food_item.large %> zł</p>
      </div>
    </div>
  </div> 
</div>

Jeżeli to nie pomoże to sprawdź czy na pewno wszystkie bloki są pozamykane.