Q&A
質問者さんが記述したHTML, CSSを追記していただけませんか？
メニューの項目がたくさんあり、1行の横並びにしたいのですが、パソコンで見た時、1行のおさまりません。
各メニュー項目の間隔をデフォルトの値より狭くしたいのですが、どうすれば、可能でしょうか？
あああ いいい えええ おおお かかか ききき くくく けけけ
↓
あああ いいい えええ おおお かかか ききき くくく けけけ
html
1 2<link rel="stylesheet" href="bootstrap.min.css"> 3<script type="text/javascript" src="jquery.min.js" ></script> 4<script type="text/javascript" src="bootstrap.min.js"></script> 5 6 7</head> 8<body> 9 10 11<header id="header" class="navbar navbar-default"> 12<!--Facility Header--> 13 <div class="container"> 14 <div class="row"> 15 <!-- <div class="col-sm-2 col-xs-3"><a href="#menu" class="btn btn-C"><i class="fa fa-bars fa-fw hidden-xs"></i> Menu</a></div> --> 16 17 <nav class="navbar"> 18 <!-- <div class="container-fluid"> --> 19 <!-- Brand and toggle get grouped for better mobile display --> 20 <div class="navbar-header"> 21 <a class="navbar-brand" href=""> 22 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myInverseNavbar" aria-expanded="false"> 23 <span class="icon-bar"></span> 24 <span class="icon-bar"></span> 25 <span class="icon-bar"></span> 26 </button> 27 </div> 28 29 <div class="collapse navbar-collapse" id="myInverseNavbar"> 30 <ul class="nav navbar-nav navbar-right"> 31 <li><a href="">あああああああ</a></li> 32 <li><a href="">いいいいいいい</a></li> 33 <li><a href="">ううううう</a></li> 34 <li><a href="">ええええええ</a></li> 35 <li><a href="">おおお</a></li> 36 <li><a href="">かかかかかかかかかかかか</a></li> 37 <li><a href="">きききききききき</a></li> 38 <li><a href="">くくくくくく</a></li> 39 <li><a href="">けけけけ</a></li> 40 <li><a href="">こここここ</a></li> 41 </ul> 42 </div> 43 </nav> 44 </div> 45 </div> 46</header> 47 48
過去の質問を解決済みにしてください
各ブロック等の、並べ方・幅・高さ、等はCSSで行いますので、該当のCSSコードも提示してください。その方が解決への早道だと思います。
回答1件
0
デフォルトではpaddingが15pxとられているので、変更すればいいと思います。
CSS
1.nav>li>a { 2 padding: 10px 4px; 3}
containerクラスを使っているようですが左右に大きくmarginがとられるため、container-fluidを使うことを考えたほうがいいかもしれません。
HTML
1<div class="container-fluid">
メニューが多く表示させすぎかと思います。とりあえずの方法として、ドロップダウンを使えばいいでしょう。公式のサンプルを参照してください。
https://getbootstrap.com/docs/3.3/components/#navbar
ウインドウサイズがある程度小さくなると縦メニューに切り替わりますが、Bootstrap 4 ではブレイクポイントがいくつか選べるようになります。変更点が多いのですぐに移行できないでしょうが、考えておいてもいいかもしれません。
投稿2017/08/28 05:14
総合スコア13749
あなたの回答
tips
プレビュー
