css 如何在引导程序中使用数据目标？

sr4lhrrt 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(113)

<button id="btn-id" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
    <span class="navbar-toggler-icon"></span>
     <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">MyBrand</a>
                <!-- Collect the nav links, forms, and other contents for toggling -->
                <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
            </ul>
</div>

我可以得到这个错误：
“data-target”属性值应为用于切换导航链接、表单和其他内容等元素的标记的ID
我需要此错误的解决方案。

css

来源：https://stackoverflow.com/questions/74458711/how-to-use-the-data-target-in-bootstrap

3条答案

按热度按时间

xxhby3vn1#

正如@Diego所提到的，bootstrap.js似乎不包括在内。注意jQuery也应该包括在内，而且在bootstrap.js之前。
Bootstrap 4仍然需要jQuery 1.9.1或更高版本，但建议您使用3.x版本，因为v3.x支持的浏览器是Bootstrap支持的浏览器，加上v3.x有一些安全修复。
在Bootstrap 5中你不需要jQuery（今天的最后一个（2022年11月），但要注意，因为你在你的帖子中使用了bootstrap-4标签，我真的不知道你使用的是哪一个），但仍然可以将我们的组件与jQuery一起使用。如果Bootstrap在窗口对象中检测到jQuery，它会将我们所有的组件添加到jQuery的插件系统中。

赞(0）回复(0）举报 2022-11-19

zengzsys2#

您可能没有包含bootstrap js资产，因为collapse特性也需要它，而css是不够的。
我认为我们谈论的是Bootstrap 4.0是理所当然的，因为这是你在问题中使用的标记。
这是官方页面，记录了折叠功能：
https://getbootstrap.com/docs/4.0/components/collapse/
这是记录资产的官方页面：
https://getbootstrap.com/docs/4.0/getting-started/introduction/
我在这里展示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button
  id="btn-id"
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#bs-navbar-collapse-1">
    Collapse
</button>

<a href="#" class="navbar-brand">MyBrand</a>
<!-- Collect the nav links, forms, and other contents for toggling -->
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
  </ul>
</div>

赞(0）回复(0）举报 2022-11-19

1tuwyuhd3#

您需要将MyBrand设置为导航栏切换图标

上面使用的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>

<div class="jumbotron text-center">
  <button id="btn-id" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
    MyBrand
  </button>
  <!-- Collect the nav links, forms, and other contents for toggling -->
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
    </ul>
  </div>

</div>

        



</body>
</html>

赞(0）回复(0）举报 2022-11-19

我来回答

css 如何在引导程序中使用数据目标？

3条答案

相关问题

热门标签

最新问答