teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

Bootstrap 3 用

2018/12/19 05:18

投稿

x_x
x_x

スコア13749

answer CHANGED
@@ -7,4 +7,34 @@
7
7
  ```
8
8
 
9
9
  後者は親のクラスが適切でない可能性があります。
10
- [https://getbootstrap.com/docs/4.1/components/dropdowns/#single-button](https://getbootstrap.com/docs/4.1/components/dropdowns/#single-button)
10
+ [https://getbootstrap.com/docs/4.1/components/dropdowns/#single-button](https://getbootstrap.com/docs/4.1/components/dropdowns/#single-button)
11
+
12
+ -- Bootstrap 3 用追加
13
+ Bootstrap 3 の場合は対処方法が変わります。
14
+
15
+ 三角は.caretのボーダーで作られています。
16
+ ```CSS
17
+ .dropdown .dropdown-toggle .caret {
18
+ border-width: 15px;
19
+ }
20
+ ```
21
+
22
+ marginは親(.dropdown)でとるようにしてください。
23
+ .btn-toolbar は余計なスタイルを当ててしまうので外したほうがいいかもしれません。
24
+
25
+ ```CSS
26
+ button.btn.btn-default.dropdown-toggle.interval{
27
+ /*margin-bottom: 50px;
28
+ margin-left: 50px;*/
29
+ padding: 50px 200px;
30
+ }
31
+
32
+ .btn-toolbar .dropdown {
33
+ margin-bottom: 50px;
34
+ margin-left: 50px;
35
+ }
36
+
37
+ .btn-toolbar .dropdown .dropdown-toggle {
38
+ float: none;
39
+ }
40
+ ```