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

Question

我正在尝试学习bootstrap但是我遇到了多浏览器支持的问题。标准反向导航栏在firefox上看起来很好，但搜索表单在chrome上分割。我尝试使用col-sm- *但没有帮助？为什么我要面对这个问题？无论如何没有自定义css解决这个问题？我也检查了这个问题Bootstrap navbar-form width issue on chrome 这有点类似的问题，但在我的情况下，搜索图标转到导航的最右角和最左边的输入字段。这是我的导航栏

的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行的表单标记中删除类＆＃34; navbar-left＆＃34;，
• 和班级，＆＃34; form-group＆＃34;，来自第19行的div。

所以：

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

成功：

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

Answer 2

我在form-group div中解决了这个添加固定宽度的问题：

<div class="input-group" style="width: 150px;">
                        <input type="text" name="q" style="width:150px" class="input-sm form-control" placeholder="Recherche">
                        <span class="input-group-btn">
                            <button type="submit" formaction="index.php" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span></button>
                        </span>
                    </div>

请参阅此处的文档（并查看粗体注释）：link