Bootstrap Navbar 与品牌折叠 [重复]

Question

我的导航栏有问题。 我使用 Bootstrap 3.3.7。

我的导航栏需要在 1200 像素处折叠，但它仍然无法正常工作。 当我的 770px 导航栏崩溃时，我的导航栏品牌无法正常工作。搜索字段位于按钮下方，但我希望它一直都在一行中。

我尝试了很多，搜索了很多。 （例如Bootstrap 3 Navbar Collapse）

代码：

    <div class="container">
<nav class="navbar navbar-default navbar-expand-lg bg-light">
    <div class="container-fluid">
        <span class="navbar-brand" id="navbarbrand" href="#">
                <form class="navbar-form">
                    <button id="addDoku" type="button" class="btn btn-default " data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus"></span></button>
        <input type="text" name="search" onkeyup="searchFunction1()" id="search" class="form-control" placeholder="Search">
        </form>
        </span>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
            <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
            </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#vorlagen">Vorlagen</a></li>
                <li><a href="#allgemein">Allgemein</a></li>
                <li><a href="#netzwerk">Netzwerk</a></li>
                <li><a href="#rma">RMA Support</a></li>
                <li><a href="#honeywell">Honeywell</a></li>
                <li><a href="#vocollect">Vocollect</a></li>
                <li><a href="#voiceman">VoiceMan</a></li>
                <li><a href="#sap">SAP</a></li>
                <li><a href="#sonstige">Sonstige</a></li>
            </ul>
        </div>
    </div>
</nav>

编辑

这是我想要避免的：

编辑

我用这个链接添加我的CSS

<link href="Stylesheet2.css" rel="stylesheet">

但是我在这个文件中有一些其他的 CSS 样式。也许这就是问题所在？ 我的意思是 @media 需要在一个额外的 CSS 文件中？

Answer 1

我在 Bootstrap 中发现了以下规则：

@media (min-width: 768px){
    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

现在，如果宽度小于 768 像素，输入字段将更改为 display: block; 和 width: 100%;。为了防止这种情况，您必须添加没有媒体规则（或使用@media (max-width: 767px)）的css，并且您的输入字段将与按钮在一行中。

---

编辑： 关于如何更改导航栏断点的说明写在这里：https://stackoverflow.com/a/36289507/7409991 我还没有测试它，但似乎你只需要在 css 顶部更改 max-with