Q&A
Bootstrapを読み込んでいるところも含めてソースコードの提示は可能ですか？また、bootstrap本体、jquery含めて必要なファイルは正しく読み込めていますか？
お世話になっております。
初心者の質問失礼します。
Bootstrapで下記のように表記したのですが画像がレスポンシブではありません……
html
1 <div class="container"> 2 <div class="row"> 3 <div class="col-12"> 4 <img src="img/test.png" class="img-responsive"> 5 </div> 6 </div> 7 <div class="row"> 8 <div class="col-md-6"> 9 テスト 10 </div> 11 <div class="col-md-6"> 12 ですよー 13 </div> 14 </div> 15
とのように表記するのかご教授頂けないでしょうか？
お忙しいところ大変申し訳無いのですが
上記お問い合わせいたします。
PS
http://studio-key.com/Bootstrap/ImageDecoration01.html
のように自動で勝手に大きさを変えて欲しいと思っております。
PS2
Bootstrap4を利用しています。
コメントありがとうございます。すいません。ソースコードは莫大なので提示は難しいです……ちゃんと読めて無いのかとも思いましたが<div class="container"><div class="row"><div class="col-12">で表記した部分は正常に動作しております。
なるほど。全てではなくheadなど必要なファイルを読み込んでいるところだけでも良かったのですが。ではせめてBootstrapのバージョンを追記してください。
あ、バージョン追記依頼については既に先に回答された方が書いていますね。結構バージョンによる仕様がまちまちだったり、ある機能ない機能あるので、マイナーバージョンも含めて環境情報として提示されたほうが良いです（回答者も再現確認やサンプルコードを書いた上で回答している人も少なくないです）
仰る通り Bootstrap4 です。
回答2件
0
ベストアンサー
画像のレスポンシブ設定が間違っているように思います。
下記のドキュメントを参考にしてください。
おそらくimg-responsiveは以前のバージョンで利用されていた設定なのではないでしょうか？
記事を探してみたところ、bootstrap3では利用していたようです。
（そういえば3の頃に私もimg-responsiveを使っていたような）
ドキュメントの通り、img-fluidを指定するとレスポンシブ確認できました。
投稿2018/02/28 08:25
総合スコア80888
それでしたっ
＞img-fluid
どうやらBootstrap3の情報を探して
情報が見つけられなくて失礼しました。
大変助かりました。
以上 ご連絡いたします。
0
col-12
↓
col-md-12
とかでは？
（sm以下の指定は不要？）
追記1
あ、col-12 もありなのか（ぐぐった）。
使ったことなかった ごめんなさい
ええっと、
- レスポンシブでないというのは？
sm 以下用の指定がないからとか そういうのではなくです？
どういう表示になって欲しいのでしょうか。
- あと Bootstrap のバージョンも書いた方が良いかもしれません。(Bootstrap 3? 4?)
col-12 を使っているということは Bootstrap 4 ですかね･･･？
追記2
自動で大きさを変えたい、とのことですが、
class="col-12" だと サイズは常に 12 ではないかと思うのですがどうでしょうか。
たとえば class="col-12 col-sm-8 col-lg-5" のように指定すると、
ブラウザサイズが lg 以上の場合は 5、
sm 以上の場合は 8、
それ以下の場合は 12 のように
占有サイズが変わります。
(col-12 は Bootstrap3 の col-xs-12 と同じような使い方だという認識で書いています。ぐぐったらそんな感じに読み取れたのですが...違ったらごめんなさい)
投稿2018/02/28 06:05
編集2018/02/28 07:27
総合スコア1126
すいません。
例えば
http://studio-key.com/Bootstrap/ImageDecoration01.html
のように自動で大きさを変えたいと思っております。
以上 ご連絡いたします。
あなたの回答
tips
プレビュー
