コードを解除して、バンドのWebサイト用の水平カードを作成しました。これは次の場所に表示されます。
http://www.jukeboxjunkies.rocks/Song
私は見た目が本当に好きですが、カードをモバイルデバイスで表示すると、行が積み重なって、あまり好きではありません。
対：
私が好きではないバージョン（小さいデバイスではこのように表示されます）
だから、2つのこと...
ここにHTMLコードを入れることができますが、サイトで見ることができます。ここに投稿する必要があるかどうかを知らせてください。
＃1カードで、d-sm-flexをd-flexに変更します。d-sm-flex576px未満のブレークポイントではトリガーされません。これは、ほとんどのポートレート指向のモバイルデバイスです。また、少なくともモバイルでは、フレックスラップセットは必要ありません。コンテンツ側を右側に保ち、下に積み重ねないようにする必要があるためです。
＃2はcard-footer、内のカードの下にすでにあるようです。これにより、すべてのブレークポイントでテキスト整列が自動的に使用されます。これはあなたが望むものではありませんか？UIの観点からは、ユーザーの行動は右揃えのボタンに傾いているため、ハンバーガーが右側にあるのはなぜですか。
Tablet +の場合、以下のリクエストリンクを持つIMOも使用できます。ただし、使用する水平方向の不動産がたくさんあるので、次の調整で問題を解決できます。
.card.flex-sm-column.flex-md-row
.card-footer.align-self-md-center
また、CSSセレクターの調整を行う場合は、.cardセレクターで直接調整しないことをお勧めします。のように<div class="card card--song" />、これらの特定のカードに別のCSSクラスを追加して.card、ブートストラップによって提供されるグローバルスタイルをオーバーライドせず、代わりにコンポーネントレベルでオーバーライドします（.card--song）。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加