Html DIV标记未显示所有内联元素

我正在尝试使用Bootstrap 4创建导航栏，但在我的div标记中，项目没有内联，并且我无法将导航项目向右对齐

这里是HTML

<nav class="navbar navbar-inverse ">
        <div style="display:inline">
            <ul class="nav navbar">
                <li>
                     <button id="sidebarToggle" class="btn btn-primary">
                         <i class="fa fa-angle-double-left"></i>
                     </button>

                </li>
            </ul>
            <span><a asp-controller="App" asp-action="Index" class="navbar-brand" style="color:cornflowerblue">The World</a></span>
            <ul class="nav navbar">
                <li>
                    <a href="#" class="btn btn-sm btn-info">
                        <i class="fa fa-save"></i>Save
                    </a>
                </li>
            </ul>
        </div>
    </nav>

这是结果

---

只需将内联样式更改为：

<div style="display: flex; justify-content: flex-end; align-items: center">