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

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

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

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

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

Bootstrap レスポンシブ化について

1Kazu
one

総合スコア3

HTML5

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

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0回答

0評価

0クリップ

134閲覧

投稿2022/05/03 09:58

編集2022/05/04 05:24

Bootstrap レスポンシブ化について

使っているBootstrapのバージョンはbootstrap', '~> 4.5'です!
画面幅がcol-md(768px)以上の場合、この形を保持したい
イメージ説明
しかし、962pxにまで画面幅を狭めると”絵本のタイトルで検索”のテキストの部分が二行になってしまっています。これを画面幅がcol-md(768px)以上の場合までは上記の画像のように一行で表されるようにしたいです。この場合メディアクエリを使いフォントサイズを小さくする他により簡単に一行で表示する方法はありますでしょうか。
イメージ説明
colを指定した要素がcolからはみ出てしまう場合、要素(h1タグなど)が二行になってしまったりします。

html

<body> <div class="container"> <div class ="row box-row-1"> <div class="col-md-3 box-1"> サイドバー </div> <div class="col-md-9 box-2"> <div class="row box-row-2"> <!-- <div class="col-md-4"> --> <p class="box-3 col-md-4">絵本のタイトルで検索</p> </div> <!-- <div class="col-md-4"> --> <p class="box-4 col-md-4">検索フォーム</p> </div> <!-- <div class="col-md-4"> --> <p class="box-5 col-md-4">検索</p> <!-- </div> --> </div> <div class="row box-row-3"> 商品一覧 </div> </div> </div> </div> </body>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/05/03 21:14

Bootstrapのバージョンはいくつでしょう
1Kazu

2022/05/04 00:55

bootstrap', '~> 4.5'です!
m.ts10806

2022/05/04 01:45

質問本文に追記を

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。