Q&A
Bootstrapのバージョンをマイナーバージョンも含めて質問本文に提示してください。
質問タグに「Bootstrap」を追加してください。
https://teratail.com/tags/Bootstrap
bootstrapのグリッドシステム内の画像と背景色の幅を調整したいです。
色々試したのですが、できません。
5.0.0-beta1です。
作成中のサイトはこちらになります。
http://spiritualcompany.net/portfolio/site1/index.html
html
1<div class="container-fluid forth"> 2 <div class="row"> 3 <h2 class="forth-title">ここアップは、皆さんの売り上げアップに貢献していきます。</h2> 4 </div> 5 <div class="row forth-row"> 6 <div class="col-md-6"> 7 <img src="img/6.jpg" alt="保障" class="img-fluid"> 8 </div> 9 <div class="col-md-6 forth-right"> 10 <i class="fas fa-shield-alt fa-3x"></i> 11 <h2>1年間成果保障</h2> 12 <p>お申込み頂いてから、1年間成果 13 出なかった場合には、全額返金致します。 14 </p> 15 <a href="#">1年間成果保障の詳細</a> 16 </div> 17 </div> 18 19 <div class="row forth-row"> 20 <div class="col-md-6"> 21 <img src="img/7.jpg" alt="保障" class="img-fluid"> 22 </div> 23 <div class="col-md-6 forth-right"> 24 <i class="fas fa-address-card fa-3x"></i> 25 <h2>直接面談</h2> 26 <p>直接面談により、御社にあった売上アップ の方法をカスタマイズし提供します。 27 </p> 28 <a href="#">直接の面談によるサポートの詳細</a> 29 </div> 30 </div> 31 32 <div class="row forth-row"> 33 <div class="col-md-6"> 34 <img src="img/8.jpg" alt="保障" class="img-fluid"> 35 </div> 36 <div class="col-md-6 forth-right"> 37 <i class="fas fa-laptop fa-3x"></i> 38 <h2>オンラインツール</h2> 39 <p>オンラインツールにより、売り上げアップサポート を行っていきます。 40 </p> 41 <a href="#">オンラインツールの詳細</a> 42 </div> 43 </div> 44 45 </div>
上から4段目の「ここアップは、皆さんの売り上げアップに貢献していきます。」というdiv内の画像と背景色の幅の調整がしたいです。
やりたいけどできないことが次の3つです。
１．右側のdivのforth-rightの幅を狭くしたい。
２．デスクトップの大きい画面のときに、画像と文字（forth-rightクラス）の間隔を狭めたい
（＋文字（forth-rightクラス）右側に余白を作りたい）
３．モバイルで見たときに、画像の幅とforth-rightの幅を同じにしたい
（今は、forth-rightの方が横幅大きく表示されます。）
よろしくお願いいたします。
失礼いたしました。
Bootstrap5.0.0です。
タグも追加致しました。
>Bootstrap5.0.0です
となると、まだ安定版ではないので、その中でもどの版か分かるようにしてもらえたらと。
alphaとbetaだと仕様が違ったりします・・・
もどの版か分かるようにとは、どういうことでしょうか？
使うbootstrapのバージョンを変えたほうがいいのでしょうか？
いえ、違います。「その中でも どの版か」です。
https://bootstrap-guide.com/
この「更新履歴」にあるように、
alpha1→alpha2→alpha3→beta1→beta2
と版を重ねており、仕様も変わっていってます。
色味がちょっと変わってたり。
「バージョンを変えた方がいい」ではなく「今使ってるバージョンを詳細に確認して記述してほしい」
という質問の修正依頼です。
すみません、読み込んでいるのは、
5.0.0-beta1/
とありますが、こちらでいいでしょうか？
はい。それですねbeta1
回答2件
0
自己解決
左側の写真の右余白が広いのは、画像が左寄せになっているから。
text-align:centerで中央ぞろいにする。
html
1<div class="col-md-6 forth-img"> 2 <img src="img/6.jpg" alt="保障" class="img-fluid "> 3 </div>
とクラスを指定。CSSで、
CSS
1.forth-img{ 2 text-align: center; 3}
右側の緑背景部分に右余白が無いのは、
<div class="col-md-6 forth-right"> を <div class="col-md-5 forth-right">と <div class="col-md-1 forth-right"> に分解したら、余白が空きました。html
1<div class="col-md-5 forth-right"> 2 <i class="fas fa-shield-alt fa-3x"></i> 3 <h2>1年間成果保障</h2> 4 <p>お申込み頂いてから、1年間成果 5 出なかった場合には、全額返金致します。 6 </p> 7 <a href="#">1年間成果保障の詳細</a> 8 </div> 9 <div class="col-md-1 forth-padding"> 10 </div>
投稿2021/02/23 08:11
総合スコア16
0
1と3 <div class="col-md-7">画像</div><div class="col-md-5"><div class="forth-right">内容</div></div>
2 .forth img, .img-fluid の max-width CSS指定を外す
投稿2021/02/21 12:26
総合スコア784
ご回答ありがとうございます。
col-md-7とcol-md-5にしてみたところ、１はうまくいったのですが、モバイルにしたときに、やはり文字部分の横幅が広くなってしまいます。（1年間成果保障の部分だけ更新したものをURLにアップしました）
それから、forth-rightの部分の右側に余白を作って、もっと左の画像との幅を狭くしたいです。
margin-rightと指定すると、幅があふれて下側に移動してしまいます。
↑の回答のHTML構造(forth-rightは内側に追加したdivタグに付ける)になってないので、試してみてください。
<div class="col-md-5 forth-right">
<i class="fas fa-shield-alt fa-3x"></i>
<h2>1年間成果保障</h2>
<p>お申込み頂いてから、1年間成果
出なかった場合には、全額返金致します。
</p>
<a href="#">1年間成果保障の詳細</a>
</div>
と一番内側のdivにforth-rightが設定なっていますが、どう修正するということでしょうか？
理解力がなく申し訳ございません。
こんな感じに入れ子にするという意味です。
```
div.col-md-5
└ div.farth-right
├ i
├ h2
├ p
└ a
```
ご回答ありがとうございます。
やってみたのですが、（http://spiritualcompany.net/portfolio/site1/index.html）幅は写真との幅は狭まらず、縦幅が短くなってしまいました。
* 幅は写真との幅は狭まらず幅は写真との幅は狭まらず…
- .forth img と .img-fluid が max-width: 85%; になってます → 100%に
- 画像幅が640pxしか無いので十分大きなサイズに(CSSで幅いっぱいにするか、十分大きなサイズの実画像に変える)
* 縦幅が短くなってしまいました → div.forth-right に .h-100 を付加、でいけませんか？
丁寧にご回答ありがとうございます。
なんとか解決できました。
↑の解決法、悪手と思いますが… 納得されているなら
ありがとうございます！
あなたの回答
tips
プレビュー
