ブートストラップを使用している場合、3つの画像を連続して表示するにはどうすればよいですか?

モンスターコード

私は画像モデルを持っており、各画像には関連するエントリがあり、これも画像です。関連する3つのエントリを、その数に応じて続けて表示したいと思います。ブートストラップを使用しています。

これは私がこれまでに書いたものです:

<% @image.related_entries.each.in_groups_of(3, false).each_with_index do |entry_row, i| 
  <div class="row_thumbnails">
   # In row 1 I want 3 entries(images displayed in thumbnail look)
   </div>

<%end%>
MilesStanfield

each_sliceを使用してみてください

<% @image.related_entries.each_slice(3) do |related_img_slice|
  <div class="row">
    <% related_img_slice.each do |related_img|
      <div class="col-md-4">
        <%= image_tag(related_img.location) %>
      </div>
    <% end %>
  </div>
<% end %>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

アイテムを連続して表示するにはどうすればよいですか(phpとブートストラップを使用してデータベースのすべてのアイテムを表示します)

分類Dev

ブートストラップを使用してこれらの3つの列を中央に配置するにはどうすればよいですか

分類Dev

ブートストラップを使用して画像とテキストを垂直方向の中央に配置するにはどうすればよいですか?

分類Dev

ブートストラップを使用してこれらの画像を同じサイズにするにはどうすればよいですか?

分類Dev

ブートストラップを使用してタブの背景画像を調整するにはどうすればよいですか?

分類Dev

SUMIFSを使用して2つのGoogleスプレッドシートワークブックを接続するにはどうすればよいですか?

分類Dev

背景画像として使用する場合、CSSスプライトをスケーリングするにはどうすればよいですか?

分類Dev

ブーストラップを使用してゲームのリストを水平方向に表示するにはどうすればよいですか?

分類Dev

ブートストラップを使用してレスポンシブ画像に検索バーを配置するにはどうすればよいですか?

分類Dev

レスポンシブな2列を連続して作成するにはどうすればよいですか?最初のテキスト、ブートストラップ4の2番目の画像

分類Dev

ブートストラップ3を使用してdivの順序を変更するにはどうすればよいですか?

分類Dev

Googleスプレッドシートでimporthtmlを使用して、同じスプレッドシートで複数のURLから連続してテーブルをインポートするにはどうすればよいですか?

分類Dev

ブートストラップ4–ナビゲーションバーが折りたたまれているときにアイテムを連続して表示するにはどうすればよいですか?

分類Dev

SELECTを使用してスループットを表示するにはどうすればよいですか?

分類Dev

GTFSを使用して、ストップの直接接続されたネイバーを一覧表示するにはどうすればよいですか?

分類Dev

クラスまたはID属性がない場合、bs4 / pythonを使用して、ネストされたテーブルのセット内で目的のテーブルを見つけるにはどうすればよいですか?

分類Dev

ブートストラップ3を使用して作成したフォームを検証するにはどうすればよいですか?

分類Dev

ブートストラップ3を使用して流動的なギャラリーを構築するにはどうすればよいですか?

分類Dev

10秒ごとに2つの画像と1つのビデオを使用してブートストラップカルーセルで自動スライドを有効にするにはどうすればよいですか?

分類Dev

ブートストラップを使用して、灰色の背景でテキスト ボックスの左側に画像を表示するにはどうすればよいですか?

分類Dev

pytestのパラメータ化を使用して、1つのテストケースが失敗した場合に残りのテストをスキップするにはどうすればよいですか?

分類Dev

HTMLやCSSを使用して、関連するテキストの右側に画像を常に表示するにはどうすればよいですか?

分類Dev

ブートストラップを使用してこれらのボックスを整列するにはどうすればよいですか?

分類Dev

ブートストラップ4を使用してtextarea要素をすべての高さで埋めるにはどうすればよいですか?

分類Dev

ブートストラップクラスを使用して、divを他のdiv内に中央揃えするにはどうすればよいですか?

分類Dev

別のパラメータを使用してリストを決定しているときに、リストの連続するアイテムを合計するにはどうすればよいですか?

分類Dev

CakePHP 3でグリフィコンを使用してブートストラップボタンを出力するにはどうすればよいですか?

分類Dev

+ =を使用して連結する場合、bashスクリプトに改行文字を追加するにはどうすればよいですか?

分類Dev

連続する属性に基づいて、クラスのオブジェクトをグループ化するにはどうすればよいですか?

Related 関連記事

  1. 1

    アイテムを連続して表示するにはどうすればよいですか(phpとブートストラップを使用してデータベースのすべてのアイテムを表示します)

  2. 2

    ブートストラップを使用してこれらの3つの列を中央に配置するにはどうすればよいですか

  3. 3

    ブートストラップを使用して画像とテキストを垂直方向の中央に配置するにはどうすればよいですか?

  4. 4

    ブートストラップを使用してこれらの画像を同じサイズにするにはどうすればよいですか?

  5. 5

    ブートストラップを使用してタブの背景画像を調整するにはどうすればよいですか?

  6. 6

    SUMIFSを使用して2つのGoogleスプレッドシートワークブックを接続するにはどうすればよいですか?

  7. 7

    背景画像として使用する場合、CSSスプライトをスケーリングするにはどうすればよいですか?

  8. 8

    ブーストラップを使用してゲームのリストを水平方向に表示するにはどうすればよいですか?

  9. 9

    ブートストラップを使用してレスポンシブ画像に検索バーを配置するにはどうすればよいですか?

  10. 10

    レスポンシブな2列を連続して作成するにはどうすればよいですか?最初のテキスト、ブートストラップ4の2番目の画像

  11. 11

    ブートストラップ3を使用してdivの順序を変更するにはどうすればよいですか?

  12. 12

    Googleスプレッドシートでimporthtmlを使用して、同じスプレッドシートで複数のURLから連続してテーブルをインポートするにはどうすればよいですか?

  13. 13

    ブートストラップ4–ナビゲーションバーが折りたたまれているときにアイテムを連続して表示するにはどうすればよいですか?

  14. 14

    SELECTを使用してスループットを表示するにはどうすればよいですか?

  15. 15

    GTFSを使用して、ストップの直接接続されたネイバーを一覧表示するにはどうすればよいですか?

  16. 16

    クラスまたはID属性がない場合、bs4 / pythonを使用して、ネストされたテーブルのセット内で目的のテーブルを見つけるにはどうすればよいですか?

  17. 17

    ブートストラップ3を使用して作成したフォームを検証するにはどうすればよいですか?

  18. 18

    ブートストラップ3を使用して流動的なギャラリーを構築するにはどうすればよいですか?

  19. 19

    10秒ごとに2つの画像と1つのビデオを使用してブートストラップカルーセルで自動スライドを有効にするにはどうすればよいですか?

  20. 20

    ブートストラップを使用して、灰色の背景でテキスト ボックスの左側に画像を表示するにはどうすればよいですか?

  21. 21

    pytestのパラメータ化を使用して、1つのテストケースが失敗した場合に残りのテストをスキップするにはどうすればよいですか?

  22. 22

    HTMLやCSSを使用して、関連するテキストの右側に画像を常に表示するにはどうすればよいですか?

  23. 23

    ブートストラップを使用してこれらのボックスを整列するにはどうすればよいですか?

  24. 24

    ブートストラップ4を使用してtextarea要素をすべての高さで埋めるにはどうすればよいですか?

  25. 25

    ブートストラップクラスを使用して、divを他のdiv内に中央揃えするにはどうすればよいですか?

  26. 26

    別のパラメータを使用してリストを決定しているときに、リストの連続するアイテムを合計するにはどうすればよいですか?

  27. 27

    CakePHP 3でグリフィコンを使用してブートストラップボタンを出力するにはどうすればよいですか?

  28. 28

    + =を使用して連結する場合、bashスクリプトに改行文字を追加するにはどうすればよいですか?

  29. 29

    連続する属性に基づいて、クラスのオブジェクトをグループ化するにはどうすればよいですか?

ホットタグ

アーカイブ