当代码不在网站上时，为什么我的导航搜索栏会缩短？

Question

所以我有这个在线使用的代码，当我去使用它时，我得到一个简短的搜索栏，但是当它来自这个网站时 http://www.bootply.com/103530#。搜索栏是全长。我已经用 bootstrap css 试过了，根本没有 css，但它们仍然与网站不匹配，有人可以帮我吗？

编辑：JSFiddle 示例 Bootstrap 3.x http://jsfiddle.net/hkqLtdvw/

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <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>
    </div>

    <div class="navbar-collapse collapse" id="navbar-collapsible">

      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>

      <div class="navbar-form navbar-right btn-group">
        <button type="button" class="btn btn-default">Button 1</button>
        <button type="button" class="btn btn-default">Button 2</button>
        <button type="button" class="btn btn-default">Button 3</button>
      </div>

      <form class="navbar-form">
        <div class="form-group" style="display:inline;">
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
          </div>
        </div>
      </form>

    </div>

  </div>
</nav>

Answer 1

在 css

试试这个

 .input-group {width: 200px;}

Answer 2

比较这个：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

还有这个：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

你有答案了。

具体来说，.input-group 的样式从 display: table 更改为 display: inline-table。

Answer 3

您使用的 bootstrap 版本错误，请更改为 3.0.0，它将解决您的问题。

参见 fiddle : https://jsfiddle.net/xtat0oa6/

这是 CDN https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

当代码不在网站上时，为什么我的导航搜索栏会缩短？

Why is my nav search bar shortened when the code is not on the website?

html

css

navbar

searchbar

twitter-bootstrap