実現したいこと
Bootstrapのグリッドシステムで自動サイズ調整をしないようにしたい
→サイズ固定にしたい
※bootstrapを使わなければいいだけではあるが、会社の方針でbootstrapを使ったうえでサイズ固定をしなければならず、bootstrapを使わない選択肢はないので解決法が見いだせず困っています。
発生している問題
Windows11で、ブラウザを最大限に表示したときは、このようにレイアウトされます。
しかし、ブラウザサイズを縮めると、このようにレイアウトされてしまいます。
これを、ブラウザサイズを縮めても、①のサイズで固定されるようにしたいです。
該当のソースコード
PHP
1 2 <div class=""> 3 <div class="row"> 4 @forelse($SearchResultList as $member) 5 <div class="col-md-3 " style="padding: 15px 30px;"> 6 7 {{$member->name}}<br> 8 <br> 9 <hr> 10 ¥5,000 11 12 </div> 13 14 @empty 15 絞り込みで検索してください。 16 @endforelse 17 </div> 18 </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>
横スクロールバーを出したいということでしょうか?
いえ、横スクロールも出さないようにしたいのです。
イメージ的には、メルカリの検索結果のような動きをさせたいのです。
https://jp.mercari.com/search?keyword=%E3%81%8A%E3%82%82%E3%81%A1%E3%82%83
このように、ブラウザの幅を変えると、それに合わせて各ボックスのサイズも自動調整されるような動きになっており、これを模したいです。
> 各ボックスのサイズも自動調整されるような動きになっており、これを模したい
ご質問の冒頭に『自動サイズ調整をしないようにしたい』とありますが、これは『自動サイズ調整されるようにしたい』の間違いということでいいですか? そうであれば、ご修正をおすすめします。
大変失礼いたしました。「固定枠で表現したい」件と「可変枠で表現したい」件の2種類について課題がありまして、後者のことを書いてしまいました。本質問は前者ですので上記補足は間違いです。大変申し訳ございませんでした。
改めて回答させていただきますと「横スクロールも出さないように固定枠として表現したい」となります。

回答2件
あなたの回答
tips
プレビュー