bootstrap标准导航栏搜索表单拆分铬

Question

我正在尝试学习bootstrap但是我遇到了多浏览器支持的问题.标准反向导航栏在firefox上看起来很好,但搜索表单在chrome上分割.我尝试使用col-sm-*但没有帮助？为什么我要面对这个问题？无论如何没有自定义css解决这个问题？我检查这个问题太引导导航栏形式的宽度问题上的镀铬 这有点类似的问题,但在我的情况下,搜索图标后进入上最左边的角落导航和输入栏的最右边的角落.这是我的导航栏html

<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="padding-right: 10px;">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Hello</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class=" nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>

        <li class="dropdown">
        </li>
      </ul>
        <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <div class="input-group">
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><span class='glyphicon glyphicon-search'></span></button>
                  </span>
            </div>
       </div>
      </form>
      <ul class="nav navbar-nav navbar-right">

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

看来您需要：

• 从第 18 行的表单标签中删除类“navbar-left”，
• 以及第 19 行 div 中的类“form-group”。

所以：

<form class="navbar-form navbar-left" role="search">
<div class="form-group">

做了：

<form class="navbar-form" role="search">
<div>