Bootstrap Navbar 与品牌折叠 [重复]

Posted 2023-03-06

【中文标题】Bootstrap Navbar 与品牌折叠 [重复]

【英文标题】：Bootstrap Navbar Collapse with brand [duplicate]

【发布时间】：2018-08-02 09:18:48

【问题描述】：

我的导航栏有问题。 我使用 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 文件中？

【问题讨论】：

您似乎在混合使用 Bootstrap 3 和 4。Bootstrap 4 没有 navbar-expand-lg bg-light 类

好吧，这是可能的，但我认为我没有使用 Bootstrap 4

您首先包含哪个 CSS？ Bootstrap 还是你自己的 CSS？

我自己的 CSS 然后是 Bootstrap 样式表。好的，我改变了它，它的工作原理谢谢:)。现在它没有崩溃

【参考方案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://***.com/a/36289507/7409991 我还没有测试它，但似乎你只需要在 css 顶部更改 max-with

【讨论】：

我试试看。但它什么也没改变。但我编辑我的帖子也许有帮助。

我需要添加一些我可以使用这个 @media 的东西吗？因为它什么都没有改变:(

它应该适用于标准 css。我在jsfiddle 上创建了一个工作示例。如何将 CSS 添加到您的网站？

啊，我明白了……我什么也没做。我用 CSS 编辑我的帖子。

我在包含搜索表单的 dup 上添加了 1200px 示例