各ナビメニューの文字が勝手に改行し2段になるのを改善したいです。
今、独学でwebページの模写をしています。
ナビメニューをbootstrapを用いて制作しているのですが、レスポンシブデザインを適応したところ各ナビメニューの文字が勝手に改行し2段になってしまいます。
色々調べたりして、試行錯誤したのですが、どうしても解決できず悩んでいます。
どなたかわかる方いればご教授頂けると大変助かります。。
よろしくお願いします。
(例)
はじめに 料金プラン 商品 アクセス 店舗情報 キャンペーン
⬇︎
はじ 料金 商 アク 店舗 キャン
めに プラン 品 セス 情報 ペーン
ソースコード
HTML
1<!doctype html> 2<html lang="Ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 10 <link rel="stylesheet" href="./index.css"> 11 12 <title>模写</title> 13 </head> 14 <body> 15 <header> 16 <div class="header-a"> 17 <div class="h-green"> 18 <img src="img" alt="#"> 19 </div> 20 </div> 21 <div class="h-white"> 22 <nav class="navbar navbar-expand-md navbar-white"> 23 <a href="#" class="navbar-brand"><img src="img" alt="#"></a> 24 <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> 25 <span class="navbar-toggler-icon"></span> 26 </button> 27 <div id="#menu" class="collapse navbar-collapse"> 28 <ul class="navbar-nav"> 29 <li class="nav-item">はじめに</li> 30 <li class="nav-item">料金プラン</li> 31 <li class="nav-item">商品</li> 32 <li class="nav-item">アクセス</li> 33 <li class="nav-item">店舗情報</li> 34 <li class="nav-item">キャンペーン</li> 35 </ul> 36 </div> 37 <div class="h-apply"> 38 <div class="mypage"> 39 <a href="#" class="text-success font-weight-bold">マイページ</a> 40 </div> 41 <div class="apply"> 42 <a href="#" class="btn btn-success rounded-pill">申し込む</a> 43 </div> 44 </div> 45 </nav> 46 </div> 47 </header> 48 49 <!-- Optional JavaScript --> 50 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 51 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 52 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 53 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 54 </body> 55</html> 56
css
1header{ 2 width: 100%; 3 4 .header-a{ 5 width: 100%; 6 height: auto; 7 background-color: $color; 8 9 .h-green{ 10 max-width: 100%; 11 width: 88.5%; 12 margin: 0 auto; 13 height:100%; 14 text-align: center; 15 position: relative; 16 padding: 5.6% 0 0; 17 18 img{ 19 position: absolute; 20 top: 0; 21 left: 0; 22 right: 0; 23 bottom: 0; 24 width: 48%; 25 height: 100%; 26 margin: 0 auto; 27 } 28 } 29 30 } 31 32 .h-white{ 33 width: 100%; 34 height: auto; 35 36 .navbar{ 37 max-width: 100%; 38 width: 83.5%; 39 height: auto; 40 margin: 0 auto; 41 padding: 1.86% 0; 42 43 .navbar-brand{ 44 padding: 0; 45 margin-right: 0.95%; 46 max-width: 100%; 47 width: 12.8%; 48 height: auto; 49 img{ 50 max-width: 100%; 51 height: auto; 52 } 53 } 54 55 .navbar-collapse{ 56 max-width: 100%; 57 width: 56.1%; 58 height: auto; 59 ul{ 60 height: auto; 61 max-width: 100%; 62 width: 100%; 63 li{ 64 list-style: none; 65 padding: 1.7% 1.9%; 66 margin-right: 1.5%; 67 color: $color-2; 68 font-weight: bold; 69 font-size: 1.48vw; 70 max-width: 100%; 71 height: auto; 72 } 73 } 74 } 75 76 .h-apply{ 77 display: flex; 78 width: 21.8%; 79 max-width: 100%; 80 height: auto; 81 @import"import"; 82 83 .mypage{ 84 width: 39.7%; 85 max-width: 100%; 86 height: auto; 87 a{ 88 display: inline-block; 89 font-size: 1vw; 90 padding: 18% 10.7%; 91 max-width: 100%; 92 height: auto; 93 } 94 } 95 96 .apply{ 97 width: 59.8%; 98 max-width: 100%; 99 height: auto; 100 a{ 101 display: inline-block; 102 max-width: 100%; 103 height: auto; 104 font-size: 1.4vw; 105 font-weight: bold; 106 padding: 6.4% 15% 6.4% 33.5%; 107 background-color: $btn-success; 108 } 109 } 110 } 111 112
試したこと
・各要素の幅の調節
・文字を小さくしてみる
・word-break:Keep-all;を指定
主に以上のことを試してみました。
ざっくりですが、幅や文字のサイズ感が原因ではない気がしています。
回答1件
あなたの回答
tips
プレビュー