bootstrapのグリッドシステムの調整

Question

bootstrapのグリッドシステムの調整

解決済

回答 2

投稿 2021/02/21 17:58 ・編集 2021/02/22 07:37

評価
クリップ 0
VIEW 119

dobashi

score 10

bootstrapのグリッドシステム内の画像と背景色の幅を調整したいです。
色々試したのですが、できません。

5.0.0-beta1です。

作成中のサイトはこちらになります。
http://spiritualcompany.net/portfolio/site1/index.html

<div class="container-fluid forth">
      <div class="row">
        <h2 class="forth-title">ここアップは、皆さんの売り上げアップに貢献していきます。</h2>
      </div>
      <div class="row forth-row">
        <div class="col-md-6">
          <img src="img/6.jpg" alt="保障" class="img-fluid">
        </div>
        <div class="col-md-6 forth-right">
          <i class="fas fa-shield-alt fa-3x"></i>
          <h2>1年間成果保障</h2>
          <p>お申込み頂いてから、1年間成果
            出なかった場合には、全額返金致します。
          </p>
          <a href="#">1年間成果保障の詳細</a>
        </div>
      </div>

      <div class="row forth-row">
        <div class="col-md-6">
          <img src="img/7.jpg" alt="保障" class="img-fluid">
        </div>
        <div class="col-md-6 forth-right">
          <i class="fas fa-address-card fa-3x"></i>
          <h2>直接面談</h2>
          <p>直接面談により、御社にあった売上アップ の方法をカスタマイズし提供します。
          </p>
          <a href="#">直接の面談によるサポートの詳細</a>
        </div>
      </div>

      <div class="row forth-row">
        <div class="col-md-6">
          <img src="img/8.jpg" alt="保障" class="img-fluid">
        </div>
        <div class="col-md-6 forth-right">
          <i class="fas fa-laptop fa-3x"></i>
          <h2>オンラインツール</h2>
          <p>オンラインツールにより、売り上げアップサポート を行っていきます。
          </p>
          <a href="#">オンラインツールの詳細</a>
        </div>
      </div>

    </div>

上から4段目の「ここアップは、皆さんの売り上げアップに貢献していきます。」というdiv内の画像と背景色の幅の調整がしたいです。

やりたいけどできないことが次の3つです。
１．右側のdivのforth-rightの幅を狭くしたい。
２．デスクトップの大きい画面のときに、画像と文字（forth-rightクラス）の間隔を狭めたい
（＋文字（forth-rightクラス）右側に余白を作りたい）
３．モバイルで見たときに、画像の幅とforth-rightの幅を同じにしたい
（今は、forth-rightの方が横幅大きく表示されます。）

よろしくお願いいたします。

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

7 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

m.ts10806

2021/02/21 18:18 編集

Bootstrapのバージョンをマイナーバージョンも含めて質問本文に提示してください。
質問タグに「Bootstrap」を追加してください。
https://teratail.com/tags/Bootstrap

Bootstrapのバージョンをマイナーバージョンも含めて質問本文に提示してください。質問タグに「Bootstrap」を追加してください。 https://teratail.com/tags/Bootstrap

キャンセル
dobashi

2021/02/21 18:29

失礼いたしました。
Bootstrap5.0.0です。

タグも追加致しました。

失礼いたしました。 Bootstrap5.0.0です。タグも追加致しました。

キャンセル
m.ts10806

2021/02/21 18:29 編集

>Bootstrap5.0.0です
となると、まだ安定版ではないので、その中でもどの版か分かるようにしてもらえたらと。
alphaとbetaだと仕様が違ったりします・・・

>Bootstrap5.0.0ですとなると、まだ安定版ではないので、その中でもどの版か分かるようにしてもらえたらと。 alphaとbetaだと仕様が違ったりします・・・

キャンセル
dobashi

2021/02/21 18:40

もどの版か分かるようにとは、どういうことでしょうか？
使うbootstrapのバージョンを変えたほうがいいのでしょうか？

もどの版か分かるようにとは、どういうことでしょうか？使うbootstrapのバージョンを変えたほうがいいのでしょうか？

キャンセル
m.ts10806

2021/02/21 18:43

いえ、違います。「その中でも　どの版か」です。
https://bootstrap-guide.com/
この「更新履歴」にあるように、
alpha1→alpha2→alpha3→beta1→beta2
と版を重ねており、仕様も変わっていってます。
色味がちょっと変わってたり。
「バージョンを変えた方がいい」ではなく「今使ってるバージョンを詳細に確認して記述してほしい」
という質問の修正依頼です。

いえ、違います。「その中でも　どの版か」です。 https://bootstrap-guide.com/ この「更新履歴」にあるように、 alpha1→alpha2→alpha3→beta1→beta2 と版を重ねており、仕様も変わっていってます。色味がちょっと変わってたり。「バージョンを変えた方がいい」ではなく「今使ってるバージョンを詳細に確認して記述してほしい」という質問の修正依頼です。

キャンセル
dobashi

2021/02/21 19:01

すみません、読み込んでいるのは、
5.0.0-beta1/
とありますが、こちらでいいでしょうか？

すみません、読み込んでいるのは、 5.0.0-beta1/ とありますが、こちらでいいでしょうか？

キャンセル
m.ts10806

2021/02/21 19:02

はい。それですねbeta1

はい。それですねbeta1

キャンセル

回答 2 件

評価が高い順
新着順
古い順

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 21:26

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2021/02/22 07:35

ご回答ありがとうございます。

col-md-7とcol-md-5にしてみたところ、１はうまくいったのですが、モバイルにしたときに、やはり文字部分の横幅が広くなってしまいます。（1年間成果保障の部分だけ更新したものをURLにアップしました）

それから、forth-rightの部分の右側に余白を作って、もっと左の画像との幅を狭くしたいです。
margin-rightと指定すると、幅があふれて下側に移動してしまいます。

ご回答ありがとうございます。 col-md-7とcol-md-5にしてみたところ、１はうまくいったのですが、モバイルにしたときに、やはり文字部分の横幅が広くなってしまいます。（1年間成果保障の部分だけ更新したものをURLにアップしました）それから、forth-rightの部分の右側に余白を作って、もっと左の画像との幅を狭くしたいです。 margin-rightと指定すると、幅があふれて下側に移動してしまいます。

キャンセル
2021/02/22 11:16

↑の回答のHTML構造(forth-rightは内側に追加したdivタグに付ける)になってないので、試してみてください。

↑の回答のHTML構造(forth-rightは内側に追加したdivタグに付ける)になってないので、試してみてください。

キャンセル
2021/02/22 17:44

<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 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が設定なっていますが、どう修正するということでしょうか？理解力がなく申し訳ございません。

キャンセル
2021/02/23 09:33

こんな感じに入れ子にするという意味です。

```
div.col-md-5
└ div.farth-right
　　├ i
　　├ h2
　　├ p
　　└ a
```

こんな感じに入れ子にするという意味です。 ``` div.col-md-5 └ div.farth-right 　　├ i 　　├ h2 　　├ p 　　└ a ```

キャンセル
2021/02/23 15:27

ご回答ありがとうございます。
やってみたのですが、（http://spiritualcompany.net/portfolio/site1/index.html）幅は写真との幅は狭まらず、縦幅が短くなってしまいました。

ご回答ありがとうございます。やってみたのですが、（http://spiritualcompany.net/portfolio/site1/index.html）幅は写真との幅は狭まらず、縦幅が短くなってしまいました。

キャンセル
2021/02/23 17:14

* 幅は写真との幅は狭まらず幅は写真との幅は狭まらず…
- .forth img と .img-fluid が max-width: 85%; になってます → 100%に
- 画像幅が640pxしか無いので十分大きなサイズに(CSSで幅いっぱいにするか、十分大きなサイズの実画像に変える)
* 縦幅が短くなってしまいました → div.forth-right に .h-100 を付加、でいけませんか？

* 幅は写真との幅は狭まらず幅は写真との幅は狭まらず… - .forth img と .img-fluid が max-width: 85%; になってます → 100%に - 画像幅が640pxしか無いので十分大きなサイズに(CSSで幅いっぱいにするか、十分大きなサイズの実画像に変える) * 縦幅が短くなってしまいました → div.forth-right に .h-100 を付加、でいけませんか？

キャンセル
2021/02/23 17:25

丁寧にご回答ありがとうございます。
なんとか解決できました。

丁寧にご回答ありがとうございます。なんとか解決できました。

キャンセル
2021/02/23 20:26

↑の解決法、悪手と思いますが… 納得されているなら

↑の解決法、悪手と思いますが… 納得されているなら

キャンセル
2021/03/03 19:20

ありがとうございます！

ありがとうございます！

キャンセル

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

score 0 · Accepted Answer · 2021-02-23T17:11

解決した方法

0

左側の写真の右余白が広いのは、画像が左寄せになっているから。
text-align:centerで中央ぞろいにする。

<div class="col-md-6 forth-img">
          <img src="img/6.jpg" alt="保障" class="img-fluid ">
        </div>

とクラスを指定。CSSで、

.forth-img{
    text-align: center;
}

右側の緑背景部分に右余白が無いのは、
<div class="col-md-6 forth-right">
を
<div class="col-md-5 forth-right">と
<div class="col-md-1 forth-right">
に分解したら、余白が空きました。

<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 class="col-md-1 forth-padding">
        </div>

投稿 2021/02/23 17:11

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

bootstrapのグリッドシステムの調整

関連した質問

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

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

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

bootstrapのグリッドシステムの調整

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン