Bootstrap：导航栏折叠时，带有按钮的嵌入式表单未对齐

Question

一直在尝试学习Web开发，目前正在使用BootStrap 4.0。 我在导航栏的右侧有一个搜索字段，该搜索字段是内联的，直到尺寸更改为手机的尺寸并且导航链接崩溃为止。 在新格式下，我的搜索字段和按钮不再内联。 要明确平板电脑的尺寸，它可以正常工作，只是不能达到我认为的手机尺寸。 任何帮助将不胜感激。

<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <!-- Brand and Name -->
        <a href="#" class="navbar-brand">
            <img src="https://logoobject.com/wp-content/uploads/edd/2018/02/Free-Coffee-Logo-1-820x820.png" width = "30" height="30" class="d-inline-block align-top" alt="">
            Koffee
        </a>
        <!-- For hamburger menu -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Collapsable nav -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left hand side content use margin-right (mr) -->
            <ul class="navbar-nav mr-auto">
                <!-- Active Link -->
                <li class="nav-item"><a href="#" class="nav-link active">About Us</a></li>

                <!-- Dropdown Menu -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Features</a>
                    <div class="dropdown-menu" aria-labelledby = "navbarDropdown">
                        <a href="#" class="dropdown-item">Cultural</a>
                        <a href="#" class="dropdown-item">The best Cocoa</a>
                        <a href="#" class="dropdown-item">For the workers</a>
                        <!-- Just a line :) -->
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">Pricing</a>
                    </div>
                </li>
                <!-- Disabled link -->
                <li class="nav-item"><a href="#" class="nav-link disabled">Reviews</a></li>
            </ul>
            <!-- Right Hand side content use margin-left (ml) -->
            <ul class="navbar-nav ml-auto">
                <form class="form-inline">
                    <input class="form-control" type="search" placeholder="Search..." aria-label="Search">
                    <button type="button" class="btn btn-outline-success">Go!</button>
                </form>
            </ul>

        </div>
    </div>
</nav>

演示

Answer 1

这些是应用于.form-control类的样式的一部分：

.form-control {
    width: 100%;
}

@media (min-width: 576px)
.form-inline .form-control {
    width: auto;
} 

默认情况下，它具有width: 100%这不是您想要的width: 100% 。 但是，当屏幕尺寸大于576px width: auto重叠。 因此，将默认width: 100%更改为width: auto应该可以解决问题。

Answer 2

使用d-flex代替form-inline作为搜索表单...

https://jsfiddle.net/ahotm7uv/

<ul class="navbar-nav ml-auto">
        <form class="d-flex">
            <input class="form-control" type="search" placeholder="Search..." aria-label="Search">
            <button type="button" class="btn btn-outline-success">Go!</button>
        </form>
</ul>