Bootstrap 5 导航栏按钮折叠不起作用 [英] Bootstrap 5 navbar button collapse doesn't work

查看：61
本文介绍了Bootstrap 5 导航栏按钮折叠不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已尝试遵循有关引导程序的教程 https://www.youtube.com/watch?v=8KoUzchViH0&t=1457s 我想我在教程中做了一切，但它不起作用:c.(折叠按钮正在显示，但当我按下它时什么也没有发生.我从引导程序网站上获取模板，所以我认为每个 js 和 css 都应该附加.

(test.css为空，{% load static %}来自django框架)

{% load static %}<头><title>Strona testowa/Hobbyist.pl</title><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引导程序--><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9TwMcrossorigin="匿名"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSXEv+nYRRuWlolflfl" crossorigin="anonymous"><!-- ... --><link rel="stylesheet" href="{% static 'css/test.css' %}"><身体><标题><nav class="navbar navbar-dark bg-dark navbar-expand-md"><!-- m (margin) l/r/t/b (x=l+r, y=t+b) - wartość ekranu - wartość marginu d (diaplay) - wartość ekranu - wartość displayu --><h1 class="navbar-brand"><img src="{% static 'logo.png' %}" style="width:30;height:30;"class="mr-2 d-none d-md-inline-block align-bottom"></img>导航栏</h1><!-- 先订购-切换器 przed 徽标 --><button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse">测试

</nav></标题><!-- 预定义容器引导程序--><!-- maksymalna wielkość (dalej sie nie "rozlewa") --><div class="容器"><!-- wiersz gx-() gy-() odstępy między elementami--><div class="row gy-0"><!-- domyślnie pionowo col-sm-6 col-md-4 col-xl-3 (12 kolumn zajmij 4 w widoku small (576px-767px) możliwości: xs sm md lg xl --><div class="col-sm-6 col-md-5 offset-md-1"><!-- img-fluid = style="max-width:100%;height:auto;"--><img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<div class="col-sm-6 col-md-5"><img class="img-fluid" src="https://www.wykop.pl/cdn/c3201142/comment_HRdOdvKNI54mPFZ37Ilw3L49tj2NfKGE.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<div class="col-sm-6 col-md-4 col-xl-3"><img class="img-fluid" src="https://www.crazynauka.pl/wp-content/uploads/2017/04/pingwin3.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<div class="col-sm-6 col-md-4 col-xl-3"><img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<div class="col-sm-6 col-md-4 col-xl-3"><img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<div class="col-sm-6 col-md-4 col-xl-3"><img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<div class="col-sm-6 col-md-4 col-xl-3"><img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<div class="col-sm-6 col-md-4 col-xl-3"><img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.整数前庭 ullamcorper quam, vel auctor odio sagittis quis.Fusce auctor tristique odio, sed moestie purus finibus 等.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nunc porttitor leo ante, at egestas libero tempor iaculis.Donec ligula diam, dignissim et arcu at, sodales mollis mauris.Proin quis magnatellus.Morbi posuere faucibus massa，在molestie sem commodo at.Vivamus iaculis neque erat, eu vulputate mauris cursus 坐在 amet.Praesent vitae justo neque.Nunc et elementum totortor.</p>

<!-- rozlewa sie w nieskonczonsc<div class="container-fluid">

--><!-- 引导程序--><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8Qj9S0G0gz="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8Qj9SG0Gz="匿名"></script><!-- ... -->

解决方案

您的按钮标签中缺少这两个属性:data-bs-toggle="collapse";&data-bs-target=#test".此外，添加id"要在按钮单击时展开的 div 标签中的属性.所以，你的代码是这样的:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#测试"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="test">测试

记住: - data-bs-target 属性指示点击按钮时要折叠/展开的元素.所以id"的值data-bs-target"的属性和值属性将相同.在这种情况下，我已经接受了测试"作为一个值.

I have tried to follow tutorial about bootstrap https://www.youtube.com/watch?v=8KoUzchViH0&t=1457s i think i did everything like in tutorial but it's doesn't work :c. (Collapse button is showing but when i press it nothing happens. I take template from bootstrap website so i think every js and css should be attached.

(test.css is blank, {% load static %} is from django framework)

{% load static %}
<head>
    <title>Strona testowa / Hobbyist.pl</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- ... -->
    <link rel="stylesheet" href="{% static 'css/test.css' %}">
</head>
<body>
    <header>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <!-- m (margin) l/r/t/b (x=l+r, y=t+b) - wartość ekranu - wartość marginu d (diaplay) - wartość ekranu - wartość displayu -->
            <h1 class="navbar-brand"><img src="{% static 'logo.png' %}" style="width:30;height:30;" class="mr-2 d-none d-md-inline-block align-bottom "></img>Navbar</h1>
            <!-- order first - toggler przed logo -->
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse">
                TESTT
            </div>
            
            
        </nav>
    </header>
    
    <!-- predefiniowany container bootstrapa -->
    <!-- maksymalna wielkość (dalej sie nie "rozlewa") -->
    <div class="container">
    <!-- wiersz gx-() gy-() odstępy między elementami-->
        <div class="row gy-0">
                <!-- domyślnie pionowo col-sm-6 col-md-4 col-xl-3 (12 kolumn zajmij 4 w widoku small (576px-767px) możliwości: xs sm md lg xl -->
                <div class="col-sm-6 col-md-5 offset-md-1">
                    <!-- img-fluid = style="max-width:100%;height:auto;" -->
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-5">
                    <img class="img-fluid" src="https://www.wykop.pl/cdn/c3201142/comment_HRdOdvKNI54mPFZ37Ilw3L49tj2NfKGE.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://www.crazynauka.pl/wp-content/uploads/2017/04/pingwin3.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
        </div>
    </div>
    <!-- rozlewa sie w nieskonczonsc 
    <div class="container-fluid">
        
    </div> -->
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <!-- ... -->
</body>

解决方案

You are missing these two attributes in your button tag : data-bs-toggle="collapse" & data-bs-target="#test". Also, add the "id" attribute in the div tag which you want to expand on button click. So, your code be like:

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

<div class="collapse navbar-collapse" id="test">
    TESTT
</div>

Remember: - The data-bs-target attribute indicated which element to be collapse / expand on button click. So the value of the "id" attribute and the value of the "data-bs-target" attribute will be the same. In this case, I have takes "test" as a value.

这篇关于Bootstrap 5 导航栏按钮折叠不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆