boxを３つ横並びにした時の、box同士の間隔のとり方を教えていただきたいです。

前提・実現したいこと

現在HTML5,CSS3,Bootstrapを使用して、簡単なホームページを作成しているところです。
以下の画像のようにアイコンとテキストをborder-boxで囲んだ箱を３つずつ横並びにして表示しているのですが、box同士が接しているため間隔を
空けたいと考えています。

発生している問題・エラーメッセージ

box同士の間隔をあけるためにmarginをとったのですが、marginをとると以下の画像のように右端のboxが次の行に改行されてしまいます。
boxが改行されることなく、box同士の間隔を空けるにはどうしたよいでしょうか。

エラーメッセージ

該当のソースコード

HTML5
コードは以下の通りです

<div class="container-fluid " id="service"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="text-center"> <h2>Services</h2> <p>whta I can</p> </div> </div> </div> <div class="container"> <div class="row mt-5 text-center"> <div class="col-md-4 service"> <div class="icon"> <i class="far fa-edit"></i> </div> <div class=""> <h5>ランディングページ(LP)作成</h5> <p></p> </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-desktop"></i> </div> <div class=""> <h5>ブログ型ホームページの作成</h5>  </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-paint-brush"></i> </div> <div class=""> <h5>記事執筆</h5>  </div> </div> </div> <div class="row text-center"> <div class="col-md-4 service "> <div class="icon"> <i class="fas fa-camera"></i> </div> <div class=""> <h5>動画編集</h5>  <p></p> </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-user-alt"></i> </div> <div class=""> <h5>サポート</h5>  <p></p> </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-print"></i> </div> <div class=""> <h5>SEO 対策</h5>  </div> </div> </div> </div> </div>

css3
.container-fluid{
width: 100%;
box-sizing: border-box;

}

.row{
width: 100%;
box-sizing: border-box;

}

.service{
border:1px solid silver ;
margin-bottom:30px;
/* margin-right:5px ; /
/ justify-content:space-around; */

position: relative;
width: 100%;
/* min-height: 1px; */
padding-right: 15px;
padding-left: 15px;
}

コード
```

### 試したこと
同じようなレイアウトのサイトのソースコードをみたのですが、border-sizing:border-box;が使用されていたり、withd:100%;と指定されており、マネしてみたのですがうまくいきませんでした。

### 補足情報（FW/ツールのバージョンなど）
使用OS:windows10
エディタ：VS code
ここにより詳細な情報を記載してください。

kei344

2019/10/19 02:41

（質問文は編集できます）書かれている状況が再現するコード（HTML/CSS）を質問文に追記されたほうが回答を得やすいと思います。

mituki

2019/10/19 02:56

申し訳ございません。入力したつもりだったのですが、反映されていなかったようです。コードは以下の通りです HTML5  <div class="container-fluid " id="service"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="text-center"> <h2>Services</h2> <p>whta I can</p> </div> </div> </div> <div class="container"> <div class="row mt-5 text-center"> <div class="col-md-4 service"> <div class="icon"> <i class="far fa-edit"></i> </div> <div class=""> <h5>ランディングページ(LP)作成</h5> <p></p> </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-desktop"></i> </div> <div class=""> <h5>ブログ型ホームページの作成</h5>  </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-paint-brush"></i> </div> <div class=""> <h5>記事執筆</h5>  </div> </div> </div> <div class="row text-center"> <div class="col-md-4 service "> <div class="icon"> <i class="fas fa-camera"></i> </div> <div class=""> <h5>動画編集</h5>  <p></p> </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-user-alt"></i> </div> <div class=""> <h5>サポート</h5>  <p></p> </div> </div> <div class="col-md-4 service"> <div class="icon"> <i class="fas fa-print"></i> </div> <div class=""> <h5>SEO 対策</h5>  </div> </div> </div> </div> </div> css3 .container-fluid{ width: 100%; box-sizing: border-box; } .row{ width: 100%; box-sizing: border-box; } .service{ border:1px solid silver ; margin-bottom:30px; /* margin-right:5px ; */ /* justify-content:space-around; */ position: relative; width: 100%; /* min-height: 1px; */ padding-right: 15px; padding-left: 15px; } ・私がやりたいこととしては、boxが改行されることなく、box同士の間隔を空けることです。同じようなレイアウトのサイトのソースコードをみたのですが、border-sizing:border-box;が使用されていたり、withd:100%;と指定されており、マネしてみたのですがうまくいきませんでした。

kei344

2019/10/19 03:05

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。teratailでは保存が失敗する事例がまれにありますので、何度か試してみてください。

mituki

2019/10/19 03:11

丁寧に指摘していただいきありがとうございます。本文のほうにコードを追記しました。

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

回答2件

ベストアンサー

HTML 中のクラス名から Bootstrap 4 を使用していると仮定して回答します。

Bootstrap 4 の行の整列には flexbox が使用されており、 flex-wrap プロパティの値が wrap に指定されています (参考)。これによって、要素の幅が狭くなったとき、 flex アイテムが折り返すようになっていることが、今回の問題の原因です。

SCSS
1@mixin make-row($gutter: $grid-gutter-width) {
2  display: flex;
3  flex-wrap: wrap;
4  margin-right: -$gutter / 2;
5  margin-left: -$gutter / 2;
6}
引用元: https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23

これを解決する方法には、 flex-wrap プロパティに nowrap を指定する方法があります。Bootstrap 4 では .flex-nowrap クラスを用いて同様のことが行える (参考) ため、これを各行へ追加します。

HTML
1<div class="container-fluid " id="service">
2  <div class="row justify-content-center">
3    <div class="col-md-12">
4      <div class="text-center">
5        <h2>Services</h2>
6        <p>whta I can</p>
7      </div>
8    </div>
9  </div>
10  <div class="container">
11    <div class="row mt-5 text-center flex-nowrap"> <!-- 追加 -->
12      <div class="col-md-4 service">
13        <div class="icon">
14          <i class="far fa-edit"></i>
15        </div>
16        <div class="">
17          <h5>ランディングページ(LP)作成</h5>
18          <p></p>
19        </div>
20
21      </div>
22      <div class="col-md-4 service">
23        <div class="icon">
24          <i class="fas fa-desktop"></i>
25        </div>
26        <div class="">
27          <h5>ブログ型ホームページの作成</h5>
28        </div>
29
30      </div>
31      <div class="col-md-4 service">
32        <div class="icon">
33          <i class="fas fa-paint-brush"></i>
34        </div>
35        <div class="">
36          <h5>記事執筆</h5>
37        </div>
38
39      </div>
40
41    </div>
42    <div class="row text-center flex-nowrap"> <!-- 追加 -->
43      <div class="col-md-4 service ">
44        <div class="icon">
45          <i class="fas fa-camera"></i>
46        </div>
47        <div class="">
48          <h5>動画編集</h5>
49          <p></p>
50        </div>
51
52      </div>
53      <div class="col-md-4 service">
54        <div class="icon">
55          <i class="fas fa-user-alt"></i>
56        </div>
57        <div class="">
58          <h5>サポート</h5>
59          <p></p>
60        </div>
61
62      </div>
63      <div class="col-md-4 service">
64        <div class="icon">
65          <i class="fas fa-print"></i>
66        </div>
67        <div class="">
68          <h5>SEO 対策</h5>
69        </div>
70
71      </div>
72    </div>
73  </div>
74
75</div>

そして、各行内における要素間の間隔を隣接セレクタを用いて記述すると、改行が行われることなく各列間での間隔をあけることが出来ます (動作確認用リンク)。

CSS
1.container-fluid {
2  width: 100%;
3  box-sizing: border-box;
4}
5
6.row {
7  width: 100%;
8  box-sizing: border-box;
9}
10
11.service {
12  border: 1px solid silver;
13  margin-bottom: 30px;
14  position: relative;
15  width: 100%;
16  padding-right: 15px;
17  padding-left: 15px;
18}
19
20.col-md-4 + .col-md-4 { /* 追加 */
21  margin-left: .5em;
22}

投稿2019/10/19 13:51

編集2019/10/19 13:58

s8_chu

総合スコア14731

mituki

2019/10/20 07:14

s8_chuさんご回答ありがとうございます。おっしゃる通りbootstrap4を使用していました。flex-nowrapを追加したところ、boxが折り返されることなく横並びになりました。とても丁寧にアドバイスしていただいきありがとうございます。この問題は数日間悩んでいたものなので解決できてとてもうれいしです。

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