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>

DEMO

Answer 1

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

.form-control {
    width: 100%;
}

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

默认情况下，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>

Bootstrap：当导航栏折叠时按钮不对齐的内联表单

2 个答案: