bootstrapのnavbarの設定方法

三段の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}

m.ts10806

2021/09/21 21:45

Pythonは本件とどう関係するのでしょう。また、bootstrapのバージョンは？

taro_yamada

2021/09/21 23:30

bootstrapは4.3.1です。確かにこのソースコードの部分はpython関係なかったです。失礼しました。

Lhankor_Mhy

2021/09/22 01:54 編集

・「一番上のボタン」とはtestのことでいいですか？・「テキストの左右にスペースが入ってしまっています」という現象が確認できませんでした。パディングのことですか？・「二段目」とはtop...のことでいいですか？　であれば、「テキストの背景だけprimary色」という現象が確認できませんでした。 https://jsfiddle.net/Lhankor_Mhy/e62n3huq/

taro_yamada

2021/09/23 06:14

一番上のボタンとは登録ボタンのことです。テキストの左右のスペースはtext-nowrapで解消できました。ありがとうございました。二段目とは、TOPの行を指しています。どうも確認してみたのですが、テキストだけ背景というより、NAV BARが極端に短くなっているように感じています。