Question

我使用bootstrap类创建了一个简单的网页。我创建了一个标题，在普通的窗口视图中，它显示了搜索框。

当我在移动设备中调整窗口或文本大小时，搜索框不会显示。

我错过了什么？

这是我的编码：

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="bs-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Aerospace</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search">
</div>
<button type="submit" class="btn btn-deafult">Submit</button>
</form>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</header>

任何建议对我都有用。

谢谢，

Answer 1

问题出在这里

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="bs-navbar-collapse">

此处data-target="bs-navbar-collapse"应为data-target=".bs-navbar-collapse"

Fiddle

Answer 2

这是应该做的：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <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="index.html">Aerospace</a>

    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="search" />
        </div>
        <button type="submit" class="btn btn-deafult">Submit</button>
      </form>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a>

        </li>
        <li><a href="contact.html">Contact</a>

        </li>
        <li><a href="about.html">About</a>

        </li>
      </ul>
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>

标记是错误的。如果您有更多问题，请发表评论。

Answer 3

检查一下它工作正常..

<强> HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />

    <script src="script.js"></script>
  </head>

  <body>

    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
      <div class="container">
          <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" 
           data-target=".bs-navbar-collapse">
                  <span class="sr-only">Toggle Navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a href="index.html" class="navbar-brand">Aerospace</a>
          </div>
          <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
              <form class="navbar-form navbar-right" role="search">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="search">
                  </div>
                  <button type="submit" class="btn btn-deafult">Submit</button>
              </form>
              <ul class="nav navbar-nav">
                  <li class="active"><a href="index.html">Home</a></li>
                  <li><a href="contact.html">Contact</a></li>
                  <li><a href="about.html">About</a></li>
              </ul>
          </nav>
      </div>
  </header>


    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>

</html>

Answer 4

代码正确，搜索栏在移动设备上隐藏，点击右键显示移动设备中的所有隐藏元素。

注意：您是否包含了jQuery和bootstrap js库？如果您无法从移动设备上看到右键（汉堡按钮）中隐藏的数据，请包含上面的库

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

调整窗口大小时，Bootstrap搜索框不可见

4 个答案: