Q&A
Pythonは本件とどう関係するのでしょう。
また、bootstrapのバージョンは？
三段のnavbarを作ろうと思っています。やりたいことは、以下の通りです。
チートシートを見ながら手探りでやっていたのですが、なかなか上手く動かすことができません。
①一番上のボタンを右寄せにしたい。(ulタグのmr-autoやjustify-content-*-endを試しました)
②ボタンの幅をテキストの長さに合わせたい（今はテキストの左右にスペースが入ってしまっています。cssのnowrapのせいだと思われますが、nowrapがないと改行されてしまいます・・・）
③二段目を全てprimaryカラーにしたい（今はテキストの背景だけprimary色になっています）
④二段目のテキストの大きさを小さくして、行の高さを低くしたい。
そもそもこういったことをやろうと思った時にULタグでやるべきでないのかもしれません。
ご意見をいただければと思います。
html
1 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 2 <a href="/" class="navbar-brand">test</a> 3 <div> 4 <ul class="navbar mr-auto"> 5 <div class="button navbar-collapse mr-auto"> 6 <a href="/" class="btn btn-lg btn-warning btn-block">登録</a> 7 </div> 8 </ul> 9 <ul class="navbar-nav ml-auto bg-primary"> 10 <li class="nav-item"> 11 <a href="/" class="nav-link">TOP</a> 12 </li> 13 <li class="nav-item"> 14 <a href="/" class="nav-link">とは</a> 15 </li> 16 <li class="nav-item"> 17 <a href="/" class="nav-link">ご利用ガイド</a> 18 </li> 19 </ul> 20 <ul class="navbar-nav ml-auto"> 21 <li class="nav-item"> 22 <a href="/" class="nav-link">test</a> 23 </li> 24 <li class="nav-item"> 25 <a href="/" class="nav-link">test</a> 26 </li> 27 <li class="nav-item"> 28 <a href="/" class="nav-link">test</a> 29 </li> 30 </ul> 31 </div> 32 </nav>
stylecss
1.navbar-collapse{ 2 white-space: nowrap; 3 justify-content: end; 4 font-size: 1.48vw; 5 max-width: 100%; 6}
bootstrapは4.3.1です。
確かにこのソースコードの部分はpython関係なかったです。失礼しました。
・「一番上のボタン」とはtestのことでいいですか？
・「テキストの左右にスペースが入ってしまっています」という現象が確認できませんでした。パディングのことですか？
・「二段目」とはtop...のことでいいですか？ であれば、「テキストの背景だけprimary色」という現象が確認できませんでした。
https://jsfiddle.net/Lhankor_Mhy/e62n3huq/
一番上のボタンとは登録ボタンのことです。
テキストの左右のスペースはtext-nowrapで解消できました。ありがとうございました。
二段目とは、TOPの行を指しています。どうも確認してみたのですが、テキストだけ背景というより、NAV BARが極端に短くなっているように感じています。
あなたの回答
tips
プレビュー
