Bootstrap 4 - Barrio SASS Starter Kit + Views Bootstrap

hagi2020/08/27(木) - 18:53 に投稿
machine name set as card

BarrioはViewsのCard Column対応が含まれていると書かれている(Barrio ships with a Card Column Views template to allow card column listings.)

指示に従って、Viewsのmachine nameにcardと入力すると初期画像のような醜い画面になってしまう。

card以外のmachine nameを設定した場合は、

machine name set as normal

調べて見ると、machine nameにcardを設定すると、card-groupクラスの上にcard-columnsというクラスが設定されていることが分かったのだが、どうやらBootstrap自身の仕様がリビジョンアップで変化しているようで、flexの扱いが変わっている。それを避けるべく以下のscss設定が適当らしいことが判明した。

@media (min-width: 576px) {
    .card-columns {
        .card-group {
            display: block;
        }
    }
}

その設定後に再びmachine nameをcardに設定すると、画面は以下のようになる。

machine name set as card with block display

これで、思った通りの配置になったと思ったのだが、改めて見ると、配置順がViewsで取り出したcardが縦横の順で配置されている。Bootstrap側の資料を見ていると、これが仕様で横縦順の配置はcard-columnsではできないということが分かった。

しょうがないので、card-columnsをあきらめて、Views Bootstrapモジュールを入れて、machine nameをnormalで設定することとしたが、そのままだと抽出されたcardの数で等分されてしまう(例では5枚)。なので、scssで以下のようにいじってみた。

@media (min-width: 576px) {
    .view-content {
        .card-group {
            column-gap: 0.5rem;
            .card {
                flex: none;
                width: 220px;
                margin-bottom: 5px;
            }
        }
    }
}

意図としては、viewsの出力の場合、card間のすきまを0.5字にして、card幅を220pxにして、cardの下に5pxの余白を足すという事。576px以上の時に適用されるものなので、最初は2枚横に出るように想定した。この設定だと幅が大きくなると出る枚数が自然と増えてくるので良い感じになる。表示順序も思ったよう横縦になっている。

machine name set as normal with scss update

ちなみに、画像サイズを固定化しないように設定すると以下のようになる。

machine name set as normal with variable picture size

ついでにここでViewsのmachine nameをcardに設定すると以下のようになる。縦横順は残念だが、cardの横配置が美しい。

machine name set as card with variable picture size

タグ
Twitterシェア