Question

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

我的导航栏需要以1200px折叠，但它仍然无法正常工作。当我的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;
    }
}

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

修改有关如何更改导航栏断点的说明，请参见此处：https://stackoverflow.com/a/36289507/7409991 我还没有测试过，但看起来你只需要在css顶部改变最大值

Bootstrap Navbar与品牌折叠

1 个答案: