回答編集履歴
2
修正
answer
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
> margin-left: -$gutter / 2;
|
|
11
11
|
> }
|
|
12
12
|
> ```
|
|
13
|
-
>
|
|
13
|
+
> 引用元: [https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23](https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23)
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
これを解決する方法には、 `flex-wrap` プロパティに `nowrap` を指定する方法があります。Bootstrap 4 では `.flex-nowrap` クラスを用いて同様のことが行える ([参考](https://getbootstrap.com/docs/4.0/utilities/flex/#wrap)) ため、これを各行へ追加します。
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
</div>
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
-
そして、各行内における要素間の間隔を隣接セレクタを用いて記述
|
|
96
|
+
そして、各行内における要素間の間隔を隣接セレクタを用いて記述すると、改行が行われることなく各列間での間隔をあけることが出来ます ([動作確認用リンク](https://jsfiddle.net/rd04h25k/))。
|
|
97
97
|
|
|
98
98
|
```CSS
|
|
99
99
|
.container-fluid {
|
|
@@ -118,6 +118,4 @@
|
|
|
118
118
|
.col-md-4 + .col-md-4 { /* 追加 */
|
|
119
119
|
margin-left: .5em;
|
|
120
120
|
}
|
|
121
|
-
```
|
|
121
|
+
```
|
|
122
|
-
|
|
123
|
-
すると、改行が行われることなく各列間での間隔をあけることが出来ます ([動作確認用リンク](https://jsfiddle.net/rd04h25k/))。
|
1
修正
answer
CHANGED
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
Bootstrap 4 の行の整列には flexbox が使用されており、 `flex-wrap` プロパティの値が `wrap` に指定されています ([参考](https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23))。これによって、要素の幅が狭くなったとき、 flex アイテムが折り返すようになっていることが、今回の問題の原因です。
|
|
4
4
|
|
|
5
5
|
> ```SCSS
|
|
6
|
-
@mixin make-row($gutter: $grid-gutter-width) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
```
|
|
13
|
-
> 引用元: [https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23](https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23)
|
|
6
|
+
> @mixin make-row($gutter: $grid-gutter-width) {
|
|
7
|
+
> display: flex;
|
|
8
|
+
> flex-wrap: wrap;
|
|
9
|
+
> margin-right: -$gutter / 2;
|
|
10
|
+
> margin-left: -$gutter / 2;
|
|
11
|
+
> }
|
|
12
|
+
> ```
|
|
13
|
+
> > 引用元: [https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23](https://github.com/twbs/bootstrap/blob/104385c508a4c77761b04a9842e978bab6f359f6/scss/mixins/_grid.scss#L23)
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
これを解決する方法には、 `flex-wrap` プロパティに `nowrap` を指定する方法があります。Bootstrap 4 では `.flex-nowrap` クラスを用いて同様のことが行える ([参考](https://getbootstrap.com/docs/4.0/utilities/flex/#wrap)) ため、これを各行へ追加します。
|