Bootstrapのグリッドシステムで自動サイズ調整をしないようにしたい

Question

実現したいこと

Bootstrapのグリッドシステムで自動サイズ調整をしないようにしたい
→サイズ固定にしたい

※bootstrapを使わなければいいだけではあるが、会社の方針でbootstrapを使ったうえでサイズ固定をしなければならず、bootstrapを使わない選択肢はないので解決法が見いだせず困っています。

発生している問題

Windows11で、ブラウザを最大限に表示したときは、このようにレイアウトされます。

①

しかし、ブラウザサイズを縮めると、このようにレイアウトされてしまいます。

②

これを、ブラウザサイズを縮めても、①のサイズで固定されるようにしたいです。

該当のソースコード

    <div class="">
        <div class="row">
            @forelse($SearchResultList as $member)
            <div class="col-md-3 " style="padding: 15px 30px;">

                {{$member->name}}<br>
                <br>
                <hr>
                ¥5,000

            </div>

            @empty
                絞り込みで検索してください。
            @endforelse
        </div>
    </div>

補足情報（FW/ツールのバージョンなど）

使用しているbootstrapは以下の通りです。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Comments

[Lhankor_Mhy]

横スクロールバーを出したいということでしょうか？

[meex]

いえ、横スクロールも出さないようにしたいのです。
イメージ的には、メルカリの検索結果のような動きをさせたいのです。
https://jp.mercari.com/search?keyword=%E3%81%8A%E3%82%82%E3%81%A1%E3%82%83
このように、ブラウザの幅を変えると、それに合わせて各ボックスのサイズも自動調整されるような動きになっており、これを模したいです。

[Lhankor_Mhy]

> 各ボックスのサイズも自動調整されるような動きになっており、これを模したい

ご質問の冒頭に『自動サイズ調整をしないようにしたい』とありますが、これは『自動サイズ調整されるようにしたい』の間違いということでいいですか？　そうであれば、ご修正をおすすめします。

[meex]

大変失礼いたしました。「固定枠で表現したい」件と「可変枠で表現したい」件の2種類について課題がありまして、後者のことを書いてしまいました。本質問は前者ですので上記補足は間違いです。大変申し訳ございませんでした。

改めて回答させていただきますと「横スクロールも出さないように固定枠として表現したい」となります。

Answer 1

Bootstrapでは.col-md-3は下記のように幅を%で指定しているので、画面幅に応じて拡縮します。

@media (min-width: 768px)
.col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

これを例えば、幅300pxに固定したいなら下記のCSSを追加すればいいでしょう。

@media (min-width: 768px)
.width-fixed .col-md-3 {
  flex: 0 0 300px;
  max-width: 300px;
}

親要素にwidth-fixedクラスを付加しておきます。

    <div class="width-fixed">
        <div class="row">

Answer 2

会社の方針でbootstrapを使ったうえでサイズ固定をしなければならず、bootstrapを使わない選択肢はないので

「Bootstrapは入れるけどそれは放置して、別途でスタイルをかける」ではだめなのでしょうか？

Bootstrapをそのまま使えばレスポンシブなレイアウトになります。多かれ少なかれBootstrapを外れたスタイルを手動で入れるより他に、選択肢はありません。

Comments

[maisumakun]

何をして良くて何がだめなのか確認してください。