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

Bootstrap4系

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

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


公式ドキュメント


Cards

動作確認
Bootstrap 4 Cheat Sheet


カードの並び順

 閲覧数:382 投稿日: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


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

 閲覧数:351 投稿日: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 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 24
20 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 24
2023/2/05 0:51 更新
週間人気ページランキング / 1-28 → 2-3
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 37
3 「bgcolor」「background-color」「background」の違い | CSS 36
4 RGBの種類 / ビットカラー | RGB(色) 30
5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 18
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 18
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 17
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 16
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 16
9 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 15
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 15
10 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 14
11 Design 0 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
12 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 12
12 HSLとHSVの違い | 色変換(色) 12
13 ICCプロファイル | カラーマネージメント(色) 11
2023/2/4 1:01 更新