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

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

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

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

Bootstrap

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

解決済

ウィンドウの大きさ変更に伴って、ボックスの列数を自動変化させる方法

Eltk
Eltk

総合スコア0

HTML5

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

Bootstrap

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

1回答

0評価

0クリップ

14閲覧

投稿2019/07/28 01:06

初心者です。
以下のことで困っております。
どなたか教えていただければ幸いです。
どうぞよろしくお願いいたします。

前提・実現したいこと

bootstrapを使って(実現不可能なら使わなくても良いのですが)、添付写真のように、
通常ウィンドウのときは、ボックス要素が横に3列並び、
ウィンドウを小さくしたときは、ボックス要素が縦に3つ並ぶようにしたいです。
※各要素と要素の間には(両端も)余白が空いた状態にしたいです。

該当のソースコード

HTML

<div class="container-fluid"> <div class="row justify-content-around"> <div class="col-1"></div> <div class="col-md-3 text-center" style="background: red; height: 200px; font-size:100px; line-height:200px;">A</div> <div class="col"></div> <div class="col-md-3 text-center" style="background: yellow; height: 200px; font-size:100px; line-height:200px;">B</div> <div class="col"></div> <div class="col-md-3 text-center" style="background: blue; height: 200px; font-size:100px; color:white; line-height:200px;">C</div> <div class="col-1"></div> </div> </div>

試したこと

自分なりに調べて上記ソースコードを書いてみましたが、うまく縮みませんでした。
※bootstrapは<head>タグの中に記述済みです。

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

使用OS:Windows10(※Mac10.14.5の中に仮想空間を作り、Windowsをインストールしています)
統合開発環境:Visual Studio2019
表示ブラウザ:Microsoft edge

★ウィンドウの幅が最大のときの動作イメージ
ウィンドウの幅が最大のときの動作イメージ

★ウィンドウの幅を小さくしたときの動作イメージ
ウィンドウの幅を小さくしたときの動作イメージ

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

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

Bootstrap

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