相关疑难解决方法(0)

"移动"Bootstrap-Navbar不能正常工作

<!DOCTYPE html>
 <html lang="de">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <!--<meta charset="utf-8"> -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Stadtfestlauf - Start</title>
   <link rel="icon" type="image/png" href="favicon.png" />

   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">

   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]-->
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <!--script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
</head>
<body id="avcontent">
   <nav class="navbar navbar-default navbar-inverse" …

Run Code Online (Sandbox Code Playgroud)

html twitter-bootstrap

the*_*ser

2016 07-11

16
推荐指数

3
解决办法

8万
查看次数

Bootstrap 4导航栏崩溃无法正常工作

我正在尝试使用Bootstrap 4实现Navbar.目前,当视口缩小到移动大小时,Navbar会正确折叠.但是,在尝试切换菜单时,没有任何反应.jsFiddle示例演示了此行为.我也附上了HTML.

我采取的步骤:

删除所有自定义CSS
确保jQuery链接在Bootstrap JS文件之前
页眉和页脚中的脚本标记
从Bootstrap Docs复制并粘贴确切的示例(我得到相同的行为)
确保在Chrome浏览器中使用JS
使用WC3验证器验证的HTML
当然,阅读有关此问题的各种帖子,但没有一个会导致解决方案

jsFiddle链接https://jsfiddle.net/u7v5jba9/

    <title>
      Site title
    </title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    <body>
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">

          <a class="navbar-brand" href="#">
            <i class="fa fa-globe" aria-hidden="true"></i> Brand Name
          </a>

          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-angle-double-down"></i>
          </button>

          <div class="navbar-collapse collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item"><a href="#" class="nav-link ">Link 1</a></li>
              <li class="nav-item"><a href="#" class="nav-link ">Link 2</a></li>
              <li class="nav-item"><a …

Run Code Online (Sandbox Code Playgroud)

html javascript twitter-bootstrap bootstrap-4

Seb*_*ite

2017 11-19

13
推荐指数

1
解决办法

3万
查看次数

Bootstrap 4 - 切换按钮不起作用

我正在尝试添加navbar到我的网站,但是当我添加它切换按钮不起作用.

这是我的navbar代码:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

这是我所包含的内容:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" …

Run Code Online (Sandbox Code Playgroud)

html twitter-bootstrap bootstrap-4

xao*_*_xv

2018 03-10

8
推荐指数

2
解决办法

2万
查看次数