Bootstrap 4 Cards の card-columns 表示順序は、上から下のみ。左から右へは変更不可 

Bootstrap4系

あくまでも「石積みのような列」で表示することが出来るだけ

 状態:-  閲覧数:2,191  投稿日:2016-07-18  更新日:2016-07-18
細かい表示順番を制御することは出来ない
・使いづらい


公式ドキュメント


Cards

動作確認
Bootstrap 4 Cheat Sheet


カードの並び順

 閲覧数:231 投稿日:2016-07-18 更新日:2016-07-18 

同じことを考えている人がいた


Cards in columns ordering
Ordering across rows in `card-columns`


回答


We're just using CSS columns for that feature. If you need anything more, I'd suggest Masonry or the like


感想


元々Masonryで実装していたのよ
・下記を読んでBootstrapで実装し直したのに、今頃になってMasonry勧められても…
Cards can be organized into Masonry-like columns


調査した結果、判明した事実

 閲覧数:201 投稿日:2016-10-08 更新日:2016-10-08 

BootstrapではなくCSSの問題


高さが異なる要素をレンガ状に並べる際、CSSでは横並びに出来ない
・「CSS Flexible Box Layout」を駆使しても無理


Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)



類似度ページランキング
順位 ページタイトル抜粋
1 Font Awesome 表示方法は2種類ある。A.JavaScript + SVG。B.CSS + Webフォント 28
2 Illustrator CS3でのJavaScript実行方法 27
3 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 27
4 縦中央配置するには、親要素に2行追加。display: flex; align-items: center; 27
5 Bootstrap 4 26
6 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 26
7 invalid property value css background-color 26
8 CSS Transforms Module Level 1 26
9 Google Chrome の user agent stylesheet 26
10 「css3-mediaqueries-js」と「Respond.js」の違い 25
11 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 25
12 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード 25
13 JavaScript in Bootstrap 25
14 名前付き色(Named Colors) の仕様 25
15 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 25
16 「Illustrator」は「SVG」 出力可能 24
17 「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法 24
18 positionプロパティのrelative指定は、デフォルトではない 24
19 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 24
20 Illustrator CS2 でファイル名に「更新済み」を追加しない 24
2021/8/06 3:07 更新
週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新