Question

我最近尝试使用bootstrap创建一个类似Whatsapp的UI，所以我使用了Bootstrap Navbar。但是，当我调整窗口大小时，导航栏内容出现在新行中，我想对此进行限制。例如，“状态”带有一个点。调整窗口大小时，点将移至下一行。我该如何限制呢？（尝试867 x 811）

这里是链接Whatsapp UI Practice 看看屏幕截图。

这是我的导航栏代码：

Whatsapp的

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link active" href="index.html">Chats

                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="status.html">Status
                    <i class="material-icons" style="font-size: 11px;">brightness_1</i>
                </a>

            </li>
            <li class="nav-item">
                <a class="nav-link" href="calls.html">Calls</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    More
                </a>
                <div class="dropdown-menu" id="moreOptions">
                    <a class="dropdown-item disabled" href="#">New group</a>
                    <a class="dropdown-item disabled" href="#">New broadcast</a>
                    <a class="dropdown-item disabled" href="#">WhatsApp Web</a>
                    <a class="dropdown-item disabled" href="#">Starred messages</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="profilePage.html">Settings</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn my-2 my-sm-0 mr-sm-2" type="submit">Search</button>
        </form>

    </div>
</nav>

Answer 1

您必须更改一些CSS

this.theme

即使不需要，元素也会在bootstrap4导航栏中崩溃

1 个答案: