从 Bootstrap 的导航栏折叠中排除搜索栏

Question

我知道这里已经有人问过这个问题：

• Bootstrap navbar search outside collapse.

• Keeping my search bar viewable when my navbar collapses with twitter bootstrap

但我的不同之处在于我的搜索栏位于其他导航项目的中间，我希望所有其他导航项目都折叠，除了我的搜索栏。我浪费了一周的时间试图解决这个问题，但我所做的每一步都会造成混乱。

这是我的导航栏的外观：

https://postimg.org/image/7x623zbdi3/

HTML：

    <div class="container" id="responsiveContainer">

        <!-- Title -->
        <div class="navbar-header pull-left">
            <a class="navbar-brand" href="{% url 'index' %}"> abc </a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" id="nav">
                <li id="nav-form">
                    <form class="navbar-form">
                        <div class="form-group">
                            <input type="text" id="searchBox" class="form-control">
                            <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"> Sign In/Up <b class="caret"></b></a>
                    <ul class="dropdown-menu" class="dropdownMenu">
                        <li><a href="#" data-target=".signupModal" data-toggle="modal" id="signup"> Sign Up </a></li>
                        <li><a href="#" data-target=".loginModal" data-toggle="modal" id="signin"> Sign In </a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-left" id="nav">
                <li><a href="{% url 'articles' %}"> Article </a></li>
                <li><a href="{% url 'contact' %}"> Contact </a></li>
            </ul>
        </div>
    </div>
</nav>

自定义 CSS：

#nav-form {

    margin-right: -30px;
}

#nav input {

    background-color: #D3212D;
    color: white;
    border: 1px solid #E32636;
}

#nav button {

    background-color: #D3212D;
    color: white;
    border-radius: 60px;
    border: 1px solid maroon;
    box-shadow: 0px 0px 1px black;
    font-family: FontAwesome;
    font-size: 16px;
}

#nav button:hover {

    background-color: #cd1b27;
    box-shadow: 0px 0px 5px black;
}

input#search, select.form-control {

    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    box-shadow: 0px 0px 5px orange;
 }

 #navbarToggle {

    background-color: #E32636;
    margin-top: 0px;
    border: 1px solid #E32636;
 }

 #navbarToggle:hover, #navbarToggle:focus {

    text-shadow: 0px 0px 1px rgb(32,42,62);
    background-color: #E32636;
 }

Answer 1

您引用的其中一篇文章是here。

这个人拿了

 < form... /form>

部分并将其放在它自己的 div 中。关键是让它远离 class="collapse navbar-collapse"

Answer 2

经过大量调试，我终于找到了解决方案，这里是：

HTML：

<!-- Navigational Bar -->

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="navbarToggle">
            <span class="sr-only">Toggle navigation</span>
            <span><i class="fa fa-list fa-2x"></i></span>
        </button>

        <div class="container" id="responsiveContainer">

            <!-- Title -->
            <div class="navbar-header pull-left">
                <a class="navbar-brand" href="{% url 'index' %}"><img id="navbar-logo" src="/static/media/Images/ditookcolored.png"></a>
            </div>
            <div class="navbar-header pull-right">
                <!-- <button class="btn btn-default" id="mobileSearch"><i class="fa fa-search"></i></button> -->
                <ul class="nav navbar-nav navbar-right" id="nav">
                    <li id="nav-form">
                        <form class="navbar-form navbar-center" id="navbarForm">
                            <div class="form-group">
                                <input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
                                <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                            </div>
                        </form>
                    </li>
                </ul>
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right" id="nav">
                    <!-- <li id="nav-form">
                        <form id="navbarForm">
                            <div class="form-group">
                                <input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
                                <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                            </div>
                        </form>
                    </li> -->
                    <li class="dropdown">
                        <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-arrow-circle-down"></i> Sign In/Up </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-target="#signupModal" data-toggle="modal" id="signup"><i class="fa fa-user-plus"></i> Sign Up </a></li>
                            <li><a href="#" data-target="#loginModal" data-toggle="modal" id="signin"><i class="fa fa-sign-in"></i> Sign In </a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-left" id="nav">
                    <li><a href="{% url 'articles' %}"><i class="fa fa-list-alt"></i> Article </a></li>
                    <li><a href="{% url 'contact' %}"><i class="fa fa-phone"></i> Contact </a></li>
                </ul>
            </div>
        </div>
    </nav>

这实际上解决了我的问题：

自定义 CSS：

#nav input {

    position: static;
    margin-left: -400px;
}

#nav button {

    position: static;
    margin-left: -1px;
    height: 35px;
}