Bootstrap4のナビバーで検索フォームをバーの中央に表示したい。

Windows10Pro64bit1909ver
Firefox80.0.1(64bit)

まずBootstrap4の雛形を取得しindex.htmlを作成する。
次にナビバーの雛形を取得し埋め込む。
カスタマイズしていきます。
【追加 – ロゴを入れました】

まずBootstrap4の雛形を取得しindex.htmlを作成する。

はじめに

次にナビバーの雛形を取得し埋め込む。

Navbar

Navbar(ナビバー)では, レスポンシブなヘッダー, ナビバーなどのドキュメントと例を示します。ナビバーの使い方の例を示します。

これでナビバーだけのHTMLぺージが作成されます。開いてみましょう。デフォルトでレスポンシブになっています。幅が狭ければハンバーガーメニューが表示。幅が広ければ展開されます。メニューの中にサーチフォームがありますね。

カスタマイズしていきます。

【常にハンバーガーを！】

幅が狭くても広くてもハンバーガーメニューのみの表示にしたい。
最初の内はいろいろ消してページ更新して直してページ更新して違いを確認することの連続です。
そうやってどれがどんな作用をしているか確認していきます。
結果、怪しいのはトップの「navbar-expand-lg」でした。
これを削除し常にハンバーガーメニューが表示されるようにします。

【検索フォームを外へ、そして中央へ】

formタグはひとつしかないのでわかりますね。
これをいろんなとこにコピペし状況を確認します。
サイト名とハンバーガーメニュートグルボタンの間でしょうか。
うまくいきました。すでに中央に配置されているようですが…。
F12で様々なデバイスで確認してみましょう。
十分な幅が無いと段ズレを起こすようです。
ちなみにフォームの中央は一については下記を検索していました。ご参考に。

Google検索「navbar　中央　フォーム」
検索フォームを中央に移動する
https://www.366service.com/jp/qa/8abc112c4f34dabe6c33265d6cb5ca2c
参考にさせていただきました。

【OnsenUI】

段ズレについて
最近、別の案件で覚えた知識なのですが、「OnsenUI」というものがあるようです。
search-inputというものが使えそうです。
ところでBootstrapとOnsenUI。衝突するのでしょうか？調べましたがとりあえず気にせず追加します。
使えるものは使っていきます。素人プログラマーですので、動くことを目的とします。
Onsen UIのCDN

‘インストール’ - Onsen UI

Onsen UIのインストールガイドです。Onsen UIはハイブリッドアプリとPWAに対応したWeb ComponentsベースのHTML5 モバイルUIフレームワークです。

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

2つの実装方法がありました。両方試していいほうを採用します。
もとのformタグは削除します。

1.CSSコンポーネント

<input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">

2.Javascript(WebComponents)

<ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"></ons-search-input>

両方とも幅が狭いと段ズレします。CSSコンポーネントのほうは280pxなのでここを調整すればいいのかと。
Javascript(WebComponents)のほうは明らかに幅が狭くなければ段ズレは起こしません。
両方を組み合わせてこうしてみました。
開発が進まないのでこれで良しとします。

<input type="search" value="" placeholder="Search" class="search-input" style="width: 40%;" onchange="ons.notification.alert('Searched for: ' + this.value)">

【追加 – ロゴを入れました】

<a class="navbar-brand" href="#">
  <img src="Bootstrap.svg" width="30" height="30" class="d-inline-block align-top" alt="">
  Bootstrap
</a>