このBootStrap公式にサンプルとして置いてあるサイトが何故レスポンシブ対応しているかが分かりません。
個人的にBootStrapグリッドレイアウトを用いるには
<div class ="container"> <div class ="row"> <div class ="col-sm-12 col-mg-6 col-lg-5"> contents </div> <div class ="col-sm-12 col-mg-6 col-lg-5"> contents2 </div> </div> </div>
のように、col-...とクラスでアクセスしてくる媒体によって12カラムの内どの位カラムを用いるかというのを指定すると思います。
しかしこのサイトのースを確認するとクラスへそのようにレスポンシブ対応するような記述が見当たりません。
container
以下を眺めると、
<main role="main" class="container"> <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm"> <img class="mr-3" src="../../assets/brand/bootstrap-outline.svg" alt="" width="48" height="48"> <div class="lh-100"> <h6 class="mb-0 text-white lh-100">Bootstrap</h6> <small>Since 2011</small> </div> </div>
や
<div class="media text-muted pt-3"> <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded"> <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <div class="d-flex justify-content-between align-items-center w-100"> <strong class="text-gray-dark">Full Name</strong> <a href="#">Follow</a> </div> <span class="d-block">@username</span> </div> </div>
しかしwebページを検証してページを拡大や収縮してみるとしっかりとレスポンシブ対応しています。
そこで質問なのですが、以上のどのクラス名でレスポンシブ対応するよう指定してあげているのでしょうか?
個人的にd-flex
という記述が怪しい気もするのですが、、、、、
サンプル公式
この公式が出しているサンプル集の中ですと一番下のExperiments(実験)みたいなカテゴリの中にあるサンプルなので、bootstrapの新しい書き方として書かれているものなのでしょうか?<div class ="row">とrowを定義する記述がないことも気になります。。。
長くなってしまいましたがよろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー