質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

697閲覧

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

meex

総合スコア83

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2023/08/14 22:29

実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2023/08/15 01:14

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

2023/08/18 23:08 編集

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

2023/08/19 02:11

> 各ボックスのサイズも自動調整されるような動きになっており、これを模したい ご質問の冒頭に『自動サイズ調整をしないようにしたい』とありますが、これは『自動サイズ調整されるようにしたい』の間違いということでいいですか? そうであれば、ご修正をおすすめします。
meex

2023/08/20 14:04

大変失礼いたしました。「固定枠で表現したい」件と「可変枠で表現したい」件の2種類について課題がありまして、後者のことを書いてしまいました。本質問は前者ですので上記補足は間違いです。大変申し訳ございませんでした。 改めて回答させていただきますと「横スクロールも出さないように固定枠として表現したい」となります。
guest

回答2

0

ベストアンサー

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

css

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

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

css

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

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

PHP

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

投稿2023/08/15 02:30

編集2023/08/15 03:07
hatena19

総合スコア34367

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

投稿2023/08/15 00:51

maisumakun

総合スコア146612

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2023/08/15 00:51

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問