回答編集履歴

2 修正

s8_chu

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;
               align-items: stretch;  
           }
           .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>
```
1 修正

s8_chu

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">
       .nav-tabs {
           display: flex;
           justify-content: space-between;
           align-items: stretch;
       }
       @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>
 
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る