s8_chu score 12797
2017/12/06 01:31 投稿
| 折り返しされることではなく、タブの高さがバラバラになってしまうことが問題なのであれば、タブの高さを揃えてしまえば良いのではないかと思いますが、いかがでしょうか？ |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> |
| <title>Theme Template for Bootstrap</title> |
| <style type="text/css"> |
| @media (min-width: 768px) { |
| .nav-tabs { |
| display: flex; |
| } |
| .nav-tabs li { |
| flex: 1; |
| } |
| .nav-tabs a { |
| display: flex; |
| height: 100%; |
| } |
| } |
| </style> |
| </head> |
| <body role="document"> |
| <div class="container-fulid" role="main"> |
| <ul class="nav nav-tabs nav-justified"> |
| <li class="active"><a href="#tabA" data-toggle="tab">ああああああああ</a></li> |
| <li><a href="#tabB" data-toggle="tab">ああああ</a></li> |
| <li><a href="#tabC" data-toggle="tab">あああ</a></li> |
| <li><a href="#tabD" data-toggle="tab">ああああああああ</a></li> |
| <li><a href="#tabE" data-toggle="tab">ああ・ああああ</a></li> |
| <li><a href="#tabF" data-toggle="tab">ああああ</a></li> |
| <li><a href="#tabG" data-toggle="tab">あああああ</a></li> |
| </ul> |
| <div class="tab-content"> |
| <div class="tab-pane active" id="tabA"> |
| <p>タブAの内容</p> |
| </div> |
| <div class="tab-pane" id="tabB"> |
| <p>タブBの内容</p> |
| </div> |
| <div class="tab-pane" id="tabC"> |
| <p>タブCの内容</p> |
| </div> |
| <div class="tab-pane" id="tabD"> |
| <p>タブDの内容</p> |
| </div> |
| <div class="tab-pane" id="tabE"> |
| <p>タブEの内容</p> |
| </div> |
| <div class="tab-pane" id="tabF"> |
| <p>タブFの内容</p> |
| </div> |
| <div class="tab-pane" id="tabG"> |
| <p>タブGの内容</p> |
| </div> |
| </div> |
| </div> |
| <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
| </body> |
| </html> |
| ``` |
s8_chu score 12797
2017/12/06 01:21 投稿
| 折り返しされることではなく、タブの高さがバラバラになってしまうことが問題なのであれば、タブの高さを揃えてしまえば良いのではないかと思いますが、いかがでしょうか？ |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> |
| <title>Theme Template for Bootstrap</title> |
| <style type="text/css"> |
| |
| |
| |
| |
| |
| @media (min-width: 768px) { |
| .nav-tabs { |
| display: flex; |
| align-items: stretch; |
| } |
| .nav-tabs li { |
| text-align: center; |
| flex: 1; |
| } |
| .nav-tabs li { |
| flex: 1; |
| } |
| .nav-tabs a { |
| display: flex; |
| height: 100%; |
| .nav-tabs a { |
| display: flex; |
| height: 100%; |
| } |
| } |
| </style> |
| </head> |
| <body role="document"> |
| <div class="container-fulid" role="main"> |
| <ul class="nav nav-tabs |
| <ul class="nav nav-tabs nav-justified"> |
| <li class="active"><a href="#tabA" data-toggle="tab">ああああああああ</a></li> |
| <li><a href="#tabB" data-toggle="tab">ああああ</a></li> |
| <li><a href="#tabC" data-toggle="tab">あああ</a></li> |
| <li><a href="#tabD" data-toggle="tab">ああああああああ</a></li> |
| <li><a href="#tabE" data-toggle="tab">ああ・ああああ</a></li> |
| <li><a href="#tabF" data-toggle="tab">ああああ</a></li> |
| <li><a href="#tabG" data-toggle="tab">あああああ</a></li> |
| </ul> |
| <div class="tab-content"> |
| <div class="tab-pane active" id="tabA"> |
| <p>タブAの内容</p> |
| </div> |
| <div class="tab-pane" id="tabB"> |
| <p>タブBの内容</p> |
| </div> |
| <div class="tab-pane" id="tabC"> |
| <p>タブCの内容</p> |
| </div> |
| <div class="tab-pane" id="tabD"> |
| <p>タブDの内容</p> |
| </div> |
| <div class="tab-pane" id="tabE"> |
| <p>タブEの内容</p> |
| </div> |
| <div class="tab-pane" id="tabF"> |
| <p>タブFの内容</p> |
| </div> |
| <div class="tab-pane" id="tabG"> |
| <p>タブGの内容</p> |
| </div> |
| </div> |
| </div> |
| <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
| </body> |
| </html> |
| ``` |
