<button> 在 Bootstrap4 中无法识别答案

【问题标题】：<button> not recognized in Bootstrap4<button> 在 Bootstrap4 中无法识别
【发布时间】：2019-06-03 11:35:24
【问题描述】：

我正在尝试使用 Bootstrap4 实现向左浮动的“折叠图标”，然后是版权和复制。

我已经看到有关此主题的其他问题，但似乎没有人真正回答这个问题。其他问题有不同的代码，有明显的拼写错误，我的代码没有。为什么包含所有依赖项时 data-toggle 和 data-target 无法识别？

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">

    <nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
      
        <a class="navbar-brand titleText">Copyright &copy </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>

    </nav>

</div>
</body>
</html>

按钮没有显示，只有地图和购物车文本。如果您有解决方法，我将不胜感激与 JQuery 并列的 vanilla JS 解决方案，因为我对 JQuery 没有那么丰富的经验，而宁愿使用 Javascript。按钮

【问题讨论】：

bro 按钮用于汉堡菜单，您想从我们这里得到哪些帮助？
哇，这几乎是一样的：stackoverflow.com/questions/46100302/…
Bootstrap 4 navbar toggler not showing的可能重复
@AshayMandwarya 这不一样，那个人使用了不同的代码，所以我们的解决方案也不一样。仅仅因为我们共享相似的“主题”并不意味着我们共享相似的“解决方案”。

标签： javascript jquery html bootstrap-4

【解决方案1】：

我做了一些错字更正，切换功能现在可以使用此代码。但是需要进行额外的修改才能正确对齐元素。

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>

<!-- Popper JS -->

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
>  </script>

<!-- Latest compiled JavaScript -->
<script 
   src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> . 
</script>

<style>    

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}
</style>

</head>

<body>

<div class="container">

    <nav class="navbar navbar-fixed-top text-success">

        <button class="navbar-toggler" type="button" data-toggle="collapse" 
 data-target="#collapseNavBar">
            <span class="navbar-toggler-icon">Menu</span>
        </button>

        <div class="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>

        <a class="navbar-brand titleText">Copyright &copy </a>
    </nav>

</div>
</body>
</html>

如果需要，我将构建完整的对齐 html。希望这会有所帮助！

【讨论】：

Aravindh，你能指出我的错误吗，我似乎找不到它们或解释为什么它没有正确渲染
应该是
标签丢失。
很高兴知道！但是我不写对齐的 html 是我的错，我相信在这些更正之后现在对你来说应该更容易！

【解决方案2】：

如果您在代码中使用 text-success 类，因此您看不到导航栏背景颜色和默认链接颜色，因此我将 text-sucesss 替换为 navbar-light bg-light。

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
    <a class="navbar-brand titleText">Copyright &copy </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="collapseNavBar">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Map</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Cart</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
</body>
</html>

【讨论】：

您仍然可以在代码中使用text-success 类，请参阅下面的答案。