如何防止bootstrap 3(3.3.1)navbar-form进入移动界面的单独行

Question

我使用的固定导航栏在桌面浏览器上工作正常,但当导航栏崩溃时,搜索分为两行(http://www.employees.org/~vivek/how_it_looks.png).我如何确保搜索表单.菜单崩溃后仍保持在顶部 - 类似于yelp移动界面(http://www.employees.org/~vivek/yelp_look.png)

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Brand</a>
      <form class="navbar-form navbar-header">
        <input type="text" class="form-control" placeholder="... ">
      </form>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

Answer 1

在.navbar-form当你看看源CSS的引导意图是崩溃内使用.并且.navbar-header也是一个清除且不应嵌套的类.所以将班级 navbar-form navbar-header改为navbar-left navbar-search例如.

然后,您需要编写一些CSS来调整自定义实现的内容.如果您添加内容或更改它,CSS可能无法正常工作.

如果您愿意,可以将第二个媒体查询中的400px调整为更低的值.

演示:https://jsbin.com/sudide/1/

不同的HTML:

  <form class="navbar-left navbar-search">
    <input type="text" class="form-control" placeholder="... ">
  </form>

CSS

@media (min-width:0px) and (max-width:767px) { 
    .navbar {
        display: table;
        width: 100%;
    }
    .navbar-brand,
    .navbar-search,
    .navbar-toggle { display: table-cell }
    .navbar-search {
        padding: 7.5px 10px 0 0;
        width: 1%;
    }
}
@media (max-width:400px) { 
    .navbar-search {
        padding: 7.5px 15px;
        float: left;
        clear: both;
        width: 100%;
    }
}
@media (min-width:768px) { 
    .navbar-search {
        float: left;
        margin: 7.5px 0;
    }
}