teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問bootstrap3.3.4のmediaコンポーネントで左右に割り振りたい

編集履歴

質問編集履歴

1

質問内容の記述不備修正

2017/12/18 08:43

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,11 +16,11 @@
16
16
 
17
17
 
18
18
 
19
- 2番目にあるmedia-leftをmedia-rightにすれば、
19
+ ただ、以下のソースですと、２番目の吹き出しが切れてしまいます。
20
20
 
21
- 画像が右にfloat?されるのかと思ったのですが、
22
21
 
22
+
23
- そうなりませんでした。どのよう記述したらよいかご存じの方いらっしゃいましたら教えてください。
23
+ どのように記述するのが正しいのでしょうか。
24
24
 
25
25
 
26
26
 
@@ -28,42 +28,54 @@
28
28
 
29
29
  <ul class="media-list">
30
30
 
31
- <li class="media">
31
+ <li class="media">
32
32
 
33
- <a class="media-left" href="#">
33
+ <span class="glyphicon glyphicon-user media-left" style="font-size: 26px; vertical-align: middle;"></span>
34
34
 
35
- <img src="../img/sample-64x64.png">
35
+ <div class="media-body">
36
36
 
37
- </a>
37
+ <div class="popover right show" style="position:relative; max-width:100%;">
38
38
 
39
- <div class="media-body">
39
+ <div class="arrow"></div>
40
40
 
41
- <h4 class="media-heading">見出しＡ</h4>
41
+ <div class="popover-content" style="padding: 2px 5px; font-size: 90%; line-height: 1.5;">
42
42
 
43
- 内容。これはサンプル。
43
+ <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</span>
44
44
 
45
- </div>
45
+ </div>
46
46
 
47
- </li>
47
+ </div>
48
48
 
49
- <li class="media">
49
+ </div>
50
50
 
51
- <a class="media-left" href="#">
51
+ </li>
52
52
 
53
- <img src="../img/sample-64x64.png">
53
+ <li class="media">
54
54
 
55
- </a>
55
+ <div class="media-body">
56
56
 
57
- <div class="media-body">
57
+ <div class="popover left show" style="position:relative; max-width:100%;">
58
58
 
59
- <h4 class="media-heading">見出しＡ</h4>
59
+ <div class="arrow"></div>
60
60
 
61
- 内容。これはサンプル。
61
+ <div class="popover-content" style="padding: 2px 5px; font-size: 90%; line-height: 1.5;">
62
62
 
63
- </div>
63
+ <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span>
64
64
 
65
- </li>
65
+ </div>
66
66
 
67
+ </div>
68
+
69
+ </div>
70
+
71
+ <span class="glyphicon glyphicon-user media-right" style="font-size: 26px; vertical-align: middle;"></span>
72
+
73
+ </li>
74
+
67
- </ul>
75
+ </ul>
68
76
 
69
77
  ```
78
+
79
+
80
+
81
+ ![![イメージ説明](4ec37b2a7a7415d3cfca12ae85c8f7f2.png)](877010b455657d3f01bc056a682af12a.png)