Question

当页面缩小为平板电脑/手机尺寸时，会显示切换按钮但不起作用。这是html

<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="#bs-nav-demo" aria-expanded="false">
        <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="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav-demo">
      <ul class="nav navbar-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </div>
  </div>
</nav>

....
....


<script type="text/javascript" href="https://code.jquery.com/jquery-2.2.1.js"></script>
<script type="text/javascript" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

必要的javascript已链接。

Answer 1

所以我发现了这个问题;它非常轻微。 href属性应替换为脚本标记上的src属性。 Sublime Text的选项卡按下脚本默认为href。

Answer 2

.navbar-toggle {
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  float: right;
  left: -300px;
  margin-bottom: 8px;
  margin-right: 15px;
  margin-top: 8px;
  padding: 9px 10px;
  position: relative;
}
body{
  width: 400px !important;
}

<link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/>
<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="#bs-nav-demo" aria-expanded="false">
					<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="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-nav-demo">
				<ul class="nav navbar-nav">
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Sign Up</a></li>
					<li><a href="#">Login</a></li>
				</ul>
			</div>
		</div>

	</nav>

....
....


	<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 3

也可以调用bootstrap.css。在这里，我只是从我的本地文件中调用它

this

您可以从CDN拨打电话。而且调用js文件使用“src”而不是“href”。谢谢。

self

<link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/>

Bootstrap导航栏切换按钮不起作用

3 个答案: