Css 引导标准导航栏搜索表单在chrome上拆分

我试图学习引导，但我面临着多浏览器支持的问题。标准的反向导航栏在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>

看起来您需要：

• 从第18行的表单标记中删除类“navbar left”
• 以及第19行的div中的“formgroup”类

因此：

让它：

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

---

我解决了这个问题，在表格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>

---

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

请包含您的html。我已经为firefox和Chrome提供了我的html和图像。我一直都在获取这些信息。这里没有太多的信息，但我注意到，即使我逐字逐句地遵循示例，我自己的页面也有同样的拆分问题。你能解决这个问题吗？不起作用，在做了这些更改之后，甚至firefox也以与chrome相同的方式呈现。在第二个示例中，chrome和firefox修复了这个问题。其他人可以验证吗？好的，我在表单类中添加了col-md-1，然后它就开始工作了，但是当我尝试在表单中添加下拉符号或导航栏右侧的任何组件时，它会落在第二行。另外，如果我使用单独的搜索按钮而不是输入组，那么一切都会很完美。由于搜索表单和按钮的输入组，所有问题都被提出。我认为您使用了一些不必要的帮助器类，使您的元素处于块级别。系统地一个接一个地删除这些错误，并使用逻辑和消除过程关注您的错误。

<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>