Question

我的<li>内有一堆Bootstrap Navbar个标记内的搜索框。它在常规模式下工作正常;但是，当折叠时，它会随着下拉的其余部分一起消失。这是HTML标记：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="bootstrap/img/gray_logo.png" class="site-logo"><span class="site-name-first">Always</span><span class="site-name-second">Spanish</span></a>
        </div>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" ng-controller="HeaderController">
            <ul class="nav navbar-nav navbar-right">
                <li ng-class="{ active: isActive('/about')}"><a href="#about">About</a></li>
                <li ng-class="{ active: isActive('/blog')}"><a href="#blog">Blog</a></li>
                <li><a href="#">Premium</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="javascript:;" data-target="#contact" data-toggle="modal">Contact</a></li>
                <li>
                  <!-- Search box --> 
                  <form class="navbar-form pull-right search-box" role="search">
                    <div class="input-group">
                      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                      <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                      </div>
                    </div>
                  </form>
                </li>
            </ul>
        </div>
      </div>
    </div>

我理解这是设计的，因为一旦敲击一个项目，下拉必须消失。但是，此功能还意味着无法在折叠模式下使用搜索框。有没有（最好是纯CSS）解决方法？这是我正在谈论的下拉：

这是导航栏在常规桌面视口上的样子：

这是完整的CSS：

* {
    border-radius: 0 !important;
}
@media (max-width: 760px) {
    h1 {
	font-size: 210%;
    }
    .jumbotron p {
    	font-size: 120%;
    }
}

.navbar-text > a {
	color: inherit;
	text-decoration: none;
}

body {
	padding-top: 50px;
}

.row-padding {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 50px;
}

p {
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
}

.site-name-first {
	padding-left: 10px;
	font-family: 'Caesar Dressing', cursive;
	font-size: 1.5em;
	color: #6495ed;
}
.site-name-second {
	font-family: 'Caesar Dressing', cursive;
	font-size: 1.5em;
	color: #ff6666;
}

.site-logo {
	float:left;
	margin-top: -8px;
	width: 36px;
}

/* CSS to change Navbar collapse threshold [START]
===================================================================*/
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}
/* CSS to change Navbar collapse threshold [END]
===================================================================*/

@media (min-width: 761px) {
    .navbar-default {
	background-color: rgba(255, 255, 255, 0.9);
	border-bottom: 0px;
	color: #666666;
	margin: 0px;
    }
}
@media (max-width: 760px) {
    .navbar-default {
	background-color: rgba(255, 255, 255, 1);
	border-bottom: 0px;
	color: #666666;
	margin: 0px;
    }
}

/*.search-box {
	margin-right: -15px;
}*/

.navbar-static-bottom {
	background-color: #ffcc00;
	border: none;
	color: #665100;
	margin-bottom: 0px;
	padding-top: 0px;
}
.navbar-static-bottom .socials {
	color: #665100;
}
.footer-text {
	padding-top: 17px;
}
.footer-text a {
	color: #665100;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus {
	outline: none;
	color: #70704c;
	font-weight: 700;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
	background-color: #ffffff;
	box-shadow: inset 0 -5px 0 0 #665100;
}

.navbar-default .navbar-nav > li > a:hover {
	background-color: #ffffff;
	box-shadow: inset 0 -5px 0 0 #cca300;
	color: #cca300;
	transition: color 0.15s ease;
}

/* when a dropdown menu item is clicked open */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	background-color: #ffffff;
	box-shadow: inset 0 -5px 0 0 #cca300;
}

.home-thumb img:hover {
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	   	-ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.thumbnail img {
	-webkit-transition: all 0.3s ease 0s;
	   -moz-transition: all 0.3s ease 0s;
	     -o-transition: all 0.3s ease 0s;
	        transition: all 0.3s ease 0s;
	width: 100%;
}
.thumbnail {
	overflow: hidden;
}

.bg-gray {
	background-color: #f9f9f9;
}

.facebook-color:hover { color: #3b5998; }
.twitter-color:hover { color: #4099ff; }
.googleplus-color:hover { color: #d50f25; }
.youtube-color:hover { color: #c4302b; }
.pinterest-color:hover { color: #c92228; }

.top-jumbotron {
	background: #ffcc00;
	height: 500px;
	margin: 0px;
	border: none;
}
.second-jumbotron {
	margin: 0px;
	background: #332800;
	color: #ffcc00;
	font-size: 500%;
	line-height: 50%;
	padding-top: 0.3em;
	padding-bottom: 0.6em;
	font-family: 'Mr Dafoe', cursive;
}

.contact-box {
	border-color: #ffcc00;
}
.contact-title {
	text-align: center;
	background-color: #ffcc00;
	border-color: #ffcc00;
}
.contact-title h4 {
	font-size: 220%;
	color: #545454;
}
.contact-body {
	background-color: #ffea99;
	border-color: #ffea99;
	color: #545454;
}
.contact-footer {
	background-color: #ffcc00;
	border-color: #ffcc00;
}
.contact-field {
	background-color: #fff9e5;
	box-shadow: #b2b2b2 0px 0px 8px;
}
.contact-field:hover,
.contact-field:focus {
	background-color: #fff;
	box-shadow: #b2b2b2 0px 0px 03px inset;
}
.contact-field-single {
	height: 3em;
}
.contact-send {
	background-color: #4c3d00;
	border-color: #4c3d00;
	color: #ffffff;
	width: 7em;
}
.contact-send:hover,
.contact-send:focus,
.contact-send:active {
	background-color: #2d2400;
	border-color: #2d2400;
	color: #ffffff;
}
.contact-close {
	background-color: #938a66;
	border-color: #938a66;
	color: #ffffff;
	width: 7em;
}
.contact-close:hover,
.contact-close:focus,
.contact-close:active {
	background-color: #81774c;
	border-color: #81774c;
	color: #ffffff;
}
.airmail {
	width: 50px;
	float: left;
	padding: 0px;
}

.pre-footer-jumbotron {
	background-color: #ffefb2;
	height: 50px;
	margin-bottom: 0px;
}

Answer 1

As far as I'm concerned the easiest solution is to remove the form from li and add it separately as described in bootstrap documentation.

<ul class="nav navbar-nav navbar-right">
            <li ng-class="{ active: isActive('/about')}"><a href="#about">About</a></li>
            <li ng-class="{ active: isActive('/blog')}"><a href="#blog">Blog</a></li>
            <li><a href="#">Premium</a></li>
            <li><a href="#">Books</a></li>
            <li><a href="javascript:;" data-target="#contact" data-toggle="modal">Contact</a></li>

        </ul>
          <form class="navbar-form pull-right search-box" role="search">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                  <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                  </div>
                </div>
              </form>

bootstrap documentation

中的网址

Bootstrap：在折叠导航栏模式下，搜索框会在触摸时消失

1 个答案: