Q&A
おお!! すごい!! 勉強させていただきました_(_ _)_
bootstrap3で、タブの幅を徐々に狭くしていくと、
横幅1036pxになると、タブの中で折り返しが発生していまい、
高さがバラバラになってしまいます。(環境はchromeです）
折り返さないように、文字数を小さくするなど方法はないでしょうか。
それとも、文字数は少なくしないと難しいでしょうか。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <title>Theme Template for Bootstrap</title> 9 10 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 11 <!-- inject:css --> 12 <!-- endinject --> 13 </head> 14 15 <body role="document"> 16 17 <div class="container-fulid" role="main"> 18 19 <ul class="nav nav-tabs nav-justified"> 20 <li class="active"><a href="#tabA" data-toggle="tab">ああああああああ</a></li> 21 <li><a href="#tabB" data-toggle="tab">ああああ</a></li> 22 <li><a href="#tabC" data-toggle="tab">あああ</a></li> 23 <li><a href="#tabD" data-toggle="tab">ああああああああ</a></li> 24 <li><a href="#tabE" data-toggle="tab">ああ・ああああ</a></li> 25 <li><a href="#tabF" data-toggle="tab">ああああ</a></li> 26 <li><a href="#tabG" data-toggle="tab">あああああ</a></li> 27 </ul> 28 29 30 </div> <!-- /container --> 31 32 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 33 <!-- inject:js --> 34 <!-- endinject --> 35 </body> 36</html> 37
回答2件
0
ベストアンサー
折り返しされることではなく、タブの高さがバラバラになってしまうことが問題なのであれば、タブの高さを揃えてしまえば良いのではないかと思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 8 <title>Theme Template for Bootstrap</title> 9 <style type="text/css"> 10 @media (min-width: 768px) { 11 .nav-tabs { 12 display: flex; 13 } 14 15 .nav-tabs li { 16 flex: 1; 17 } 18 19 .nav-tabs a { 20 display: flex; 21 height: 100%; 22 } 23 } 24 </style> 25</head> 26<body role="document"> 27<div class="container-fulid" role="main"> 28 <ul class="nav nav-tabs nav-justified"> 29 <li class="active"><a href="#tabA" data-toggle="tab">ああああああああ</a></li> 30 <li><a href="#tabB" data-toggle="tab">ああああ</a></li> 31 <li><a href="#tabC" data-toggle="tab">あああ</a></li> 32 <li><a href="#tabD" data-toggle="tab">ああああああああ</a></li> 33 <li><a href="#tabE" data-toggle="tab">ああ・ああああ</a></li> 34 <li><a href="#tabF" data-toggle="tab">ああああ</a></li> 35 <li><a href="#tabG" data-toggle="tab">あああああ</a></li> 36 </ul> 37 <div class="tab-content"> 38 <div class="tab-pane active" id="tabA"> 39 <p>タブAの内容</p> 40 </div> 41 <div class="tab-pane" id="tabB"> 42 <p>タブBの内容</p> 43 </div> 44 <div class="tab-pane" id="tabC"> 45 <p>タブCの内容</p> 46 </div> 47 <div class="tab-pane" id="tabD"> 48 <p>タブDの内容</p> 49 </div> 50 <div class="tab-pane" id="tabE"> 51 <p>タブEの内容</p> 52 </div> 53 <div class="tab-pane" id="tabF"> 54 <p>タブFの内容</p> 55 </div> 56 <div class="tab-pane" id="tabG"> 57 <p>タブGの内容</p> 58 </div> 59 </div> 60</div> 61<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 62<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 63</body> 64</html>
投稿2017/12/04 18:57
編集2017/12/05 16:31
総合スコア14731
0
はみ出た(折り返し)文字の扱いはだいたい以下の3つ。
- 表示しない
- 三点リーダーを表示する
- スクロールバーを表示する
3はそのままのデザインだと恰好悪いので、スクロールバーのデザインを変えてしまう場合が多いです。
これはもうひと手間かかるため、三点リーダーで対応してみます。
基本的にはtext-overflow: ellipsis;を適用します。
bootstrapは767pxで縦1列になるため、xs用のクラスを作りwidth: 100vm;を指定しています。
css
1 ul.nav-tabs li a { 2 text-decoration: none; 3 text-overflow: ellipsis; 4 display: block; 5 overflow: hidden; 6 white-space: nowrap; 7 } 8 ul.tab-text li a { 9 width: 14vw; 10 } 11 ul.tab-text-xs li a { 12 width: 100vw; 13 }
html
1 <div class="container-fulid" role="main"> 2 3 <div class="col-xs-12 hidden-xs"> 4 <ul class="nav nav-tabs nav-justified tab-text"> 5 <li class="active"><a href="#tabA" data-toggle="tab">ああああああああ</a></li> 6 <li><a href="#tabB" data-toggle="tab">ああああ</a></li> 7 <li><a href="#tabC" data-toggle="tab">あああ</a></li> 8 <li><a href="#tabD" data-toggle="tab">ああああああああ</a></li> 9 <li><a href="#tabE" data-toggle="tab">ああ・ああああ</a></li> 10 <li><a href="#tabF" data-toggle="tab">ああああ</a></li> 11 <li><a href="#tabG" data-toggle="tab">あああああ</a></li> 12 </ul> 13 </div> 14 15 <div class="col-xs-12 visible-xs"> 16 <ul class="nav nav-tabs nav-justified tab-text-xs"> 17 <li class="active"><a href="#tabA" data-toggle="tab">ああああああああ</a></li> 18 <li><a href="#tabB" data-toggle="tab">ああああ</a></li> 19 <li><a href="#tabC" data-toggle="tab">あああ</a></li> 20 <li><a href="#tabD" data-toggle="tab">ああああああああ</a></li> 21 <li><a href="#tabE" data-toggle="tab">ああ・ああああ</a></li> 22 <li><a href="#tabF" data-toggle="tab">ああああ</a></li> 23 <li><a href="#tabG" data-toggle="tab">あああああ</a></li> 24 </ul> 25 </div> 26 27 </div> <!-- /container -->
はみ出た部分を表示しない場合はtext-overflow: clip;にすればok。
投稿2017/12/04 18:29
総合スコア469
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/05 01:08
退会済みユーザー
2017/12/05 01:42
2017/12/05 16:32
退会済みユーザー
2017/12/06 01:23