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

回答編集履歴

2

修正

2017/12/05 16:31

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -12,7 +12,6 @@
12
12
  @media (min-width: 768px) {
13
13
  .nav-tabs {
14
14
  display: flex;
15
- align-items: stretch;
16
15
  }
17
16
 
18
17
  .nav-tabs li {

1

修正

2017/12/05 16:31

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -9,26 +9,26 @@
9
9
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
10
10
  <title>Theme Template for Bootstrap</title>
11
11
  <style type="text/css">
12
+ @media (min-width: 768px) {
12
- .nav-tabs {
13
+ .nav-tabs {
13
- display: flex;
14
+ display: flex;
14
- justify-content: space-between;
15
- align-items: stretch;
15
+ align-items: stretch;
16
- }
16
+ }
17
17
 
18
- .nav-tabs li {
18
+ .nav-tabs li {
19
- text-align: center;
20
- flex: 1;
19
+ flex: 1;
21
- }
20
+ }
22
21
 
23
- .nav-tabs a {
22
+ .nav-tabs a {
24
- display: flex;
23
+ display: flex;
25
- height: 100%;
24
+ height: 100%;
25
+ }
26
26
  }
27
27
  </style>
28
28
  </head>
29
29
  <body role="document">
30
30
  <div class="container-fulid" role="main">
31
- <ul class="nav nav-tabs">
31
+ <ul class="nav nav-tabs nav-justified">
32
32
  <li class="active"><a href="#tabA" data-toggle="tab">ああああああああ</a></li>
33
33
  <li><a href="#tabB" data-toggle="tab">ああああ</a></li>
34
34
  <li><a href="#tabC" data-toggle="tab">あああ</a></li>
@@ -65,5 +65,4 @@
65
65
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
66
66
  </body>
67
67
  </html>
68
-
69
68
  ```