回答編集履歴
4
書式の改善
test
CHANGED
|
@@ -46,6 +46,4 @@
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
-
Bootstrapカラム間のマージン(余白・ガター)の仕組みをマスターする
|
|
50
|
-
|
|
51
|
-
https://tonari-it.com/column-margin/
|
|
49
|
+
[Bootstrapカラム間のマージン(余白・ガター)の仕組みをマスターする](https://tonari-it.com/column-margin/)
|
3
説明追記
test
CHANGED
|
@@ -39,3 +39,13 @@
|
|
|
39
39
|
CSSで `.content_post`に `margin-left: 2%;`を設定してますね。これを削除してください。
|
|
40
40
|
|
|
41
41
|
これがあるために全体で100%を超えてしまうためにカラム落ちしてます。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
bootstrap のグリッドシステムはカラム合計12で幅が100%になるようになってますので、marginを付けるとレイアウトが崩れます。余白を付けたい場合は、グリッドの中にdivを作成してそれに対してmarginを付けるようにします。下記が参考になるでしょう。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
Bootstrapカラム間のマージン(余白・ガター)の仕組みをマスターする
|
|
50
|
+
|
|
51
|
+
https://tonari-it.com/column-margin/
|
2
修正
test
CHANGED
|
@@ -34,4 +34,8 @@
|
|
|
34
34
|
|
|
35
35
|
---
|
|
36
36
|
|
|
37
|
+
詳細スクショ見ました。
|
|
38
|
+
|
|
37
|
-
|
|
39
|
+
CSSで `.content_post`に `margin-left: 2%;`を設定してますね。これを削除してください。
|
|
40
|
+
|
|
41
|
+
これがあるために全体で100%を超えてしまうためにカラム落ちしてます。
|
1
修正
test
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
`col-md-
|
|
1
|
+
`col-md-9` `col-md-3` というようにカラム数の合計が12になるようにします。
|
|
2
|
+
|
|
3
|
+
サイドバーを右に配置したいなら、サイドバーブロックを後に記述します。
|
|
2
4
|
|
|
3
5
|
|
|
6
|
+
|
|
7
|
+
コード例
|
|
4
8
|
|
|
5
9
|
```html
|
|
6
10
|
|
|
@@ -8,13 +12,13 @@
|
|
|
8
12
|
|
|
9
13
|
<div class="row">
|
|
10
14
|
|
|
11
|
-
<div class="content_post col-md-
|
|
15
|
+
<div class="content_post col-md-9">
|
|
12
16
|
|
|
13
17
|
<p>コンテツン</p>
|
|
14
18
|
|
|
15
19
|
</div>
|
|
16
20
|
|
|
17
|
-
<div class="sidebar col-md-
|
|
21
|
+
<div class="sidebar col-md-3 d-none d-md-block">
|
|
18
22
|
|
|
19
23
|
<p>サイドバー</p>
|
|
20
24
|
|
|
@@ -25,3 +29,9 @@
|
|
|
25
29
|
</div>
|
|
26
30
|
|
|
27
31
|
```
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
スクショ見ましたが、提示のコードではそのようにならないので、症状が再現できる範囲のhtmlを提示してください。
|