html - Bootstrap Navbar与品牌合拢

This question already has answers here:

Change bootstrap navbar collapse breakpoint without using LESS

                                    （17个答案）


                                2年前关闭。


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

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

我尝试了很多，搜索了很多。
（例如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中发现了以下规则：

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

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

编辑：
有关如何更改导航栏断点的说明，请参见此处：https://stackoverflow.com/a/36289507/7409991
我还没有发表评论，但看来您只需要在CSS顶部更改max-with

关于html - Bootstrap Navbar与品牌合拢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48928847/

上一篇：javascript - 如何根据屏幕尺寸调整横幅

下一篇：css - Montserrat 字体捷克字符呈现略低于其他字体

相关文章：

html - 如何将文本环绕在局部

javascript - 在羽光形态内标记？

django - 我怎样才能摆脱我网站顶部的空白区域？

css - 样式组件与 SASS (SCSS) 或 LESS

javascript - 无法正确刷新监视 <body> 元素的 Bootstrap scrollspy

html - bootstrap - 使列的高度等于宽度

asp.net - 主体上的动态背景图像 (ASP.NET)

css - Twitter Bootstrap 3 - 流体行中等高的面板

css - sass 中 screen 方法的等价物

javascript - 为 Bootstrap 添加和删除两个下拉动态字段