Question

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

我还看到了有关此主题的其他问题，但似乎没有一个人能够真正回答这个问题。其他问题的代码有明显的错别字，我的代码没有。当您包含所有依赖项时，为什么不能识别数据切换和数据目标？

.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的通用JS解决方案，因为我对JQuery并不了解，而是希望使用Javascript。按钮

Answer 1

修复了拼写错误并更新了HTML以显示可折叠的navBar

.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 navbar-expand-lg navbar-light bg-light 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 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>
</nav>

</div>
</body>
</html>

Answer 2

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

<!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。希望这会有所帮助！

Answer 3

如果您在代码中使用类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>

Bootstrap4中无法识别<button>

3 个答案: