Bootstrapのグリッドシステムにて、カラムのwidthやカラム間の余白が自由に調節できない

現在、iSaraというHPの模写を行っています。

そのサイトで、上から6番目のセクション(ヘッダーも含めて)で、

『iSaraで「基本的なプログラミングスキル」は教えません』

というテキストから始まるセクションがあるのですが、そのテキストのさらに下にあるSTEP.1、STEP.2、STEP3と書かれている3つのBOXがBootstrapのグリッドシステムで横並びにされています。

##本物サイト

こちら側でも上の画像のように、Bootstrapのcontainerクラスとrowクラスの中に、同じようにcol-md-4クラスを三つ用意し、横並びしてみたのですが、以下の画像のようになってしまいます。

##模写

各カラムのwidthをcssで指定しても、その指定が効いてくれませんし、カラム間にmarginを設けて余白を作ろうとすると、右端のBOXがカラム落ちしてしまいます。

この部分だけに限らず、Bootstrapを使って模写をすると、グリッドシステムを使う時にいつも各カラムのwidthと余白が自由に調節できず、本物サイトの再現(模写)ができないという問題に直面してしまうのですが、どうすればカラムのwidthとカラム間の余白をこちらで自由に設定できるようになるのでしょうか？

他サイトを見て調べたのですが、いまいちよくわからずだったので…ご質問させて頂きました。

2つめの画像の、私の模写側のコードは以下になります。

###模写のコード

HTML

<div class="container">

      <div class="row">

        <div class="stepbox col-md-4">
          <h2>STEP.1</h2>
          <h3>【バンコク渡航前１ヶ月】</h3>
          <h4>事前課題で基礎知識を学ぶ</h4>
        </div>

        <div class="stepbox col-md-4">
          <h2>STEP.2</h2>
          <h3>【バンコク到着後】</h3>
          <h4>実践的に稼ぐことに特化した学習</h4>
        </div>

        <div class="stepbox col-md-4">
          <h2>STEP.3</h2>
          <h3>【バンコク帰国後】</h3>
          <h4>講座実施後の案件獲得サポート</h4>
        </div>
      </div>
    </div>

CSS

.oshiemasen .container {
  margin-top: 30px;
}

.oshiemasen .container .stepbox {
  background-color: white;
  padding: 30px;
  padding-bottom: 20px;
  border-radius: 5px;
　width: 370px; /*この指定は効かすことが出来ず*/
}

.oshiemasen .container .stepbox h2 {
  background-color: #EBB94D;
  font-size: 16px;
  margin: 0px;
  margin-bottom: 10px;
  font-weight: 600;
  border-radius: 5px;
  line-height: 1.6;
}

.oshiemasen .container .stepbox h3 {
  font-size: 14px;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 15px;
  line-height: 1.6;
}

.oshiemasen .container .stepbox h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.6;
}

####Bootstrapの実装方法

Bootstrap4を使用し、実装方法はCDNのコピーをHTMLに貼り付けています。

素人な質問で申し訳ございませんが、お答え頂きますと幸いです。よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにするとスタイルの修正は必要になりますが、期待した見た目に近づくと思います

html
1<div class="col-md-4">
2  <div class="stepbox">
3    <h2>STEP.1</h2>
4    <h3>【バンコク渡航前１ヶ月】</h3>
5    <h4>事前課題で基礎知識を学ぶ</h4>
6  </div>
7</div>

グリッドシステムはflexboxを使っているためcolの幅はwidthで指定できません
flexboxに関してはMDNを確認してください

カラム間の余白に関してはcolのpaddingで設定できます
Googleの解説を参考に、ブラウザの開発者ツールでレイアウトを視覚的に確認されるとわかりやすいと思います

投稿2019/12/28 04:54

退会済みユーザー

総合スコア0

monsterkurochan

2019/12/28 06:58

ご解答ありがとうございます！ご指摘頂いた方法で、本物サイトに近付いた見た目にすることができました。しかし、本物サイトとと見た目が完璧に一致とはいかず、本物サイトを開発者ツールでよく見ると、本物サイトの方ではcolを囲っているcontainerの幅がBootstrapのcontainerのxlの幅である1140pxではなく、1170pxとなっていました。(container-fluidではなく、containerで) おおもとの親であるcontainerの幅が違うからだとわかり、こちら側でもcontainerの幅が1170pxになるようにwidthを指定したのですが、効いてくれません…。本物サイトでは、Bootstrapのcontainerの幅を1170pxに出来ているのはなぜなのでしょうか？そして、こちらでもcontainerの幅を1140pxよりも大きくできるのでしょうか？

退会済みユーザー

2019/12/28 13:32

大きくすることは可能なはずです CSSの記述順序や詳細度により適用されていない、記述に間違いがあり適用できない、CSSの記述は正しいがHTMLの構成上適用できない、など幅が指定できない原因は想像できますが、情報が不足しており具体的にどこが悪いかは判断できません

monsterkurochan

2019/12/29 10:52

ご解答ありがとうございます。 CSSの記述順序や詳細度は無視できるように、.containerに　width: 1170px !important;も指定したのですが、やはり大きくならずで…。逆にwidth: 1130pxといったように、1140pxよりも小さい数値だったら!importantなしでも反映はされるようです。(同じcontainerに) やはりxlのcontainerのデフォルトの幅である、1140pxよりも大きくするには何か特別なことをしなくてはいけないのでしょうか？

退会済みユーザー

2019/12/29 13:29

Bootstrapは.containerに対してどのように幅を設定しているか開発者ツールで確認されましたか? 確認されているようでしたら、それとご自身で書かれたスタイルが同じ書き方になっていますか?

monsterkurochan

2019/12/29 17:30

ご返信ありがとうございます。 Bootstrapは、本番サイトではメディアクエリを使って1200px以上の表示の時(min-width: 1200px)はcontainerの幅を1170pxにする、という指定があります。ただ、この指定は開発者ツールでみると、grid.lessというファイルにて指定されているようです。 grid.lessというのは、Bootstrapをファイルにて実装した時に入っているファイル？だと思うのですが、ファイルでBootstrapを実装してgrid.lessをいじらなければ、containerのwidthも大きくできないということですかね？ CDNの実装では、containerのwidthは大きくできないのでしょうか？

退会済みユーザー

2019/12/30 04:32

> containerの幅を1170pxにするこの認識が間違っています .containerのmax-widthを1170pxにするですよね? widthとmax-widthは異なるプロパティです

monsterkurochan

2019/12/30 10:22

ありがとうございます！おっしゃる通り、widthとmax-widthを別のプロパティとして捉えていないことが原因で、max-widthを指定することで大きくすることができました！何度もご回答頂きまして誠にありがとうございました！！

行動規範の内容に同意します