Bootstrap 导航栏不适用于移动设备 [英] Bootstrap navbar not working on mobile

问题描述

我使用引导程序将下面给定的代码用于我的home.html".但是在通过移动设备浏览网站时，搜索栏及其上的所有内容都没有显示出来.请帮忙解决！谢谢！

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="容器"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="/">开始使用</a>

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><li><form class="navbar-form navbar-left" role="search" action="/search/" method="GET" id="search" autocomplete="off"><div class="form-group"><input type="text" class="form-control" placeholder="选择要搜索的内容" name="query" width="100px"><select name="drop" class="form-control" width="20"><选项值="1">分配<选项值="2">主题(教程)</option><选项值="3">主题(论文)</option></选择>

<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button></表单><li><a href="#home">首页</a><li><a href="#about">关于</a><li><a href="#contact">联系我们</a>

<!--/.navbar-collapse -->

<!--/.container --></nav>

解决方案

您的切换目标与您的折叠 ID 不匹配:

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

小提琴

I use the below given code for my "home.html" using bootstrap. But the search bar and everything on it is not getting displayed while browsing the site through mobile. Please help with it!Thanks!

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
                <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="/">Get Started</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
    <li>
            <form class="navbar-form navbar-left" role="search" action="/search/" method="GET" id="search" autocomplete="off">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Select what to search for" name="query" width="100px">
      <select name="drop" class="form-control" width="20">
      <option value="1"> Assigns</option>
      <option value="2"> Subjects(Tutorials)</option>
      <option value="3"> Subjects(Papers)</option>
      </select>
    </div>
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
  </form>


    </li>
                <li>
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#about">About</a>
                </li>
                <li>
                    <a href="#contact">Contact us</a>
                </li>
            </ul>
        </div> 

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

解决方案

Your toggle target doesn't match your collapse ID:

<button type="button"... data-target="#navigationbar">

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

Fiddle

这篇关于Bootstrap 导航栏不适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！