Блог

Главная - Вопросы по программированию - При нажатии на значок навигационной панели содержимое не отображается в виде выпадающего списка на устройствах с малым экраном

При нажатии на значок навигационной панели содержимое не отображается в виде выпадающего списка на устройствах с малым экраном

#javascript #html #jquery #twitter-bootstrap

Вопрос:

В этом коде при установке bootstrap jquery и popperjs я загрузил 5.0.1. но в учебнике это гораздо более старая версия.

Он сворачивает панель навигации при переключении на маленький экран, но при нажатии на значок навигации детали не отображаются.

 <!DOCTYPE html>

<html lang="en">

<head>
    <nav class="navbar navbar-dark navbar-expand-sm bg-secondary fixed-top">
        <div class="container  ">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand mr-auto" href="#"> RestaurantE Con~Fusion</a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav mr-auto ">
                <li class="nav-item  "><a class="nav-link active " href="./index.html">Home</a></li>
                <li class="nav-item "><a class="nav-link" href="./aboutus.html">About us</a></li>
                <li class="nav-item "><a class="nav-link" href="#">Menu</a></li>
                <li class="nav-item "><a class="nav-link" href="#">Contact Us</a></li>
            </ul>
            </div>
        </div>
    </nav>
    
    <title>Ristorante Con Fusion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

   
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Ristorante Con Fusion</title>
</head>

<body>

    <header class="jumbotron">
        <div class = "container">
            <div class = "row row-header">
                <div class="col-12 col-sm-6 order-sm-first row-content">
                    <h1>Ristorante con Fusion</h1>
                    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
                </div>
                <div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row ">
            <div class="col-12 col-sm-4 order-sm-first row-header">
                <h3>Our Lipsmacking Culinary Creations</h3>
            </div>
            <div class="col-12 col-sm-8 order-sm-last row-content align-item-center">
                <h2>Uthappizza</h2>
                <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
            </div>
        </div>


        <div class="row">
            <div class="col-12 col-sm-4 order-sm-first row-header">
                <h3>This Month's Promotions</h3>
            </div>
            <div class="col-12 col-sm-8 order-sm-last row-content align-item-center">
                <h2>Weekend Grand Buffet</h2>
                <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-sm-4 order-sm-first row-header">
                <h3>Meet our Culinary Specialists</h3>
            </div>
            <div class="col-12 col-sm-8 order-sm-last row-content align-item-center ">
                <h2>Alberto Somayya</h2>
                <h4>Executive Chef</h4>
                <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">             
                <div class="col-4 col-sm-3 order-sm-first offset-1 ">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="col-4 col-sm-5 order-sm-mid">
                    <h5>Our Address</h5>
                    <address>
                      121, Clear Water Bay Road<br>
                      Clear Water Bay, Kowloon<br>
                      HONG KONG<br>
                      Tel.:  852 1234 5678<br>
                      Fax:  852 8765 4321<br>
                      Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
                   </address>
                </div>
                <div class="col-4 col-sm-3 align-self-center order-sm-last">
                    <div class="text-center">
                        <a href="http://google.com/ ">Google </a>
                        <a href="http://www.facebook.com/profile.php?id=">Facebook</a>
                        <a href="http://www.linkedin.com/in/">LinkedIn</a>
                        <a href="http://twitter.com/">Twitter</a>
                        <a href="http://youtube.com/">YouTube</a>
                        <a href="mailto:">Mail</a>
                    </div>
                </div>
           </div>
           <div class="row justify-content-center">             
                <div class="col-auto ">
                    <p>© Copyright 2018 Ristorante Con Fusion</p>
                </div>
           </div>
        </div>
    </footer>
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

</html>

Комментарии:

1. Поместите <nav> элемент в <body> вместо <head> .

2. Что у тебя в голове?

3. я сделал это, но ничего не вышло

Ответ №1:

Это работает:

 <!DOCTYPE html>

<html lang="en">

<head>

    <title>Ristorante Con Fusion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Ristorante Con Fusion</title>
</head>

<body>

    <nav class="navbar navbar-dark navbar-expand-sm bg-secondary fixed-top">
        <div class="container  ">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand mr-auto" href="#"> RestaurantE Con~Fusion</a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav mr-auto ">
                    <li class="nav-item  "><a class="nav-link active " href="./index.html">Home</a></li>
                    <li class="nav-item "><a class="nav-link" href="./aboutus.html">About us</a></li>
                    <li class="nav-item "><a class="nav-link" href="#">Menu</a></li>
                    <li class="nav-item "><a class="nav-link" href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <header class="jumbotron">
        <div class="container">
            <div class="row row-header">
                <div class="col-12 col-sm-6 order-sm-first row-content">
                    <h1>Ristorante con Fusion</h1>
                    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
                </div>
                <div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row ">
            <div class="col-12 col-sm-4 order-sm-first row-header">
                <h3>Our Lipsmacking Culinary Creations</h3>
            </div>
            <div class="col-12 col-sm-8 order-sm-last row-content align-item-center">
                <h2>Uthappizza</h2>
                <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
            </div>
        </div>


        <div class="row">
            <div class="col-12 col-sm-4 order-sm-first row-header">
                <h3>This Month's Promotions</h3>
            </div>
            <div class="col-12 col-sm-8 order-sm-last row-content align-item-center">
                <h2>Weekend Grand Buffet</h2>
                <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-sm-4 order-sm-first row-header">
                <h3>Meet our Culinary Specialists</h3>
            </div>
            <div class="col-12 col-sm-8 order-sm-last row-content align-item-center ">
                <h2>Alberto Somayya</h2>
                <h4>Executive Chef</h4>
                <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-4 col-sm-3 order-sm-first offset-1 ">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="col-4 col-sm-5 order-sm-mid">
                    <h5>Our Address</h5>
                    <address>
                        121, Clear Water Bay Road<br>
                        Clear Water Bay, Kowloon<br>
                        HONG KONG<br>
                        Tel.:  852 1234 5678<br>
                        Fax:  852 8765 4321<br>
                        Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
                    </address>
                </div>
                <div class="col-4 col-sm-3 align-self-center order-sm-last">
                    <div class="text-center">
                        <a href="http://google.com/ ">Google </a>
                        <a href="http://www.facebook.com/profile.php?id=">Facebook</a>
                        <a href="http://www.linkedin.com/in/">LinkedIn</a>
                        <a href="http://twitter.com/">Twitter</a>
                        <a href="http://youtube.com/">YouTube</a>
                        <a href="mailto:">Mail</a>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-auto ">
                    <p>© Copyright 2018 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Комментарии:

1. Не могли бы вы, пожалуйста, отметить мой ответ как решение?

2. да, спасибо, что так долго

Метки: