Html 引导4串联导航栏形式

我用Bootstrap 4构建了这个导航栏

我正在尝试内联添加搜索栏，并已将“form inline”类添加到搜索表单中，但搜索按钮仍在文本框下

<nav class="navbar navbar-expand-sm navbar-dark bg-secondary fixed-top">
    
    <!-- LOGO on left -->
    <a class="navbar-brand" href="#">
        <img src="../assets/DHI Logo Navbar.svg" alt="Diversified" style="width:70px;">
    </a>

    <!-- Toggler/Collapsible Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar Links -->
    <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
        <ul class="navbar-nav nav-pills">
            <li class="nav-item">
                <a href="index.php" class="nav-link">PDF Generator</a>
            </li>
            <li class="nav-item">
                <a href="contacts.php" class="nav-link">Contacts</a>
            </li>
            <li class="nav-item">
                <a href="inspectionLog.php" class="nav-link">Inspection Log</a>
            </li>
        </ul>
    </div>

    <form class="form-inline" action="inspectionLog.php">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button class="btn btn-success" type="submit">Search</button>
    </form>
    

</nav>

搜寻

我试图让左边的标志，中间的链接（它们是）和右边的搜索条。

你们有没有看到任何可能会停止在线搜索栏的错误？

CSS中的“在线”一词意味着它的行为与普通文本类似，因此当屏幕尺寸变小时，元素会环绕，这意味着按钮位于输入下方

你需要的是，以某种方式将它们组合在一起。 最简单的修复方法是在

表单

标记上使用

style=“display:flex；”“

，然后删除该类

但是，如果愿意，可以使用引导类：

class=“d-inline-flex”

将它们显示为flexbox会告诉元素坚持一行，当屏幕变小时，只需将整个内容包装起来

编辑到您的编辑
从

中删除

bg secondary

类，它应该可以正常工作。同时删除

在花括号之后，您不需要它

.navbar {
    background-color: #34495E;
}

不要使用bg secondary，而是尝试使用新的bg custom

<style>
    .bg-custom {
        background-color: #66ACF3;
    };
</style>


<nav class="navbar navbar-expand-sm navbar-dark bg-custom fixed-top">

    <!-- LOGO on left -->
    <a class="navbar-brand" href="#">
        <img src="../assets/DHI Logo Navbar.svg" alt="Diversified" style="width:70px;">
    </a>

    <!-- Toggler/Collapsible Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar Links -->
    <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
        <ul class="navbar-nav nav-pills">
            <li class="nav-item">
                <a href="index.php" class="nav-link">PDF Generator</a>
            </li>
            <li class="nav-item">
                <a href="contacts.php" class="nav-link">Contacts</a>
            </li>
            <li class="nav-item">
                <a href="inspectionLog.php" class="nav-link">Inspection Log</a>
            </li>
        </ul>
    </div>


.bg海关{
背景色：#66ACF3；
};