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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/05 01:08
退会済みユーザー
2017/12/05 01:42
2017/12/05 16:32
退会済みユーザー
2017/12/06 01:23