Saya ingin memberikan demo tentang produk saya, tur bootstrap bagus dan berfungsi tetapi mengapa navbar saya tidak bekerja ketika saya menggunakan tur bootstrap, itu menutup navbar yang dapat dilipat, tekan tombol navbar dan Anda dapat melihat ini

<!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 href="//maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.css" integrity="sha512-ORucsD7YODPUurPZ4qD14QH3p1hLaNNtLH1mGvAWvNpAQ3LsotwDXE6er5GwAKW2LzX/Sg1T5Y502DbCwIQQpQ==" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js" integrity="sha512-KlU17Q8b+noPYQtMWXM8BO08lReJoX3AHxYm7Zyi3UpYYkE4ch7r8d82DGitdIE3r82OW20VMQLVwsYyXo99sQ==" crossorigin="anonymous"></script>
</head>
<body>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>
  
<div  class="container">
  <h3>Collapsible Navbar</h3>
  <p id="txt">Hello World</p>
 
</div>

<script>
var tour = new Tour({
  steps: [
  {
    element: "#txt",
    title: "Title of my step",
    content: "Para Graph tour will be gone in 4 seconds",
    placement: "auto",
    duration:4000
  }
  
] , backdrop: true});

// Initialize the tour
tour.init();

// Start the tour
tour.start();
</script>

</body>
</html>
Tur bootstrap
-1
aryan agarwal 11 Mei 2021, 11:52

1 menjawab

Jawaban Terbaik

Saya telah menemukan solusi navbar berisi collapse class , bootstrap-tour collapse class memiliki gaya display : none, setelah memuat kedua skrip penataan (bootstrap dan tur) saya menambahkan gaya .collapse{display:initial} dan berfungsi dengan baik.

Biola yang berfungsi:

<!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 href="//maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.css" integrity="sha512-ORucsD7YODPUurPZ4qD14QH3p1hLaNNtLH1mGvAWvNpAQ3LsotwDXE6er5GwAKW2LzX/Sg1T5Y502DbCwIQQpQ==" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js" integrity="sha512-KlU17Q8b+noPYQtMWXM8BO08lReJoX3AHxYm7Zyi3UpYYkE4ch7r8d82DGitdIE3r82OW20VMQLVwsYyXo99sQ==" crossorigin="anonymous"></script>
  <style>
  .collapse{
  display:initial;
  }
  </style>
</head>
<body>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>
  
<div  class="container">
  <h3>Collapsible Navbar</h3>
  <p id="txt">Hello World</p>
 
</div>

<script>
var tour = new Tour({
  steps: [
  {
    element: "#txt",
    title: "Title of my step",
    content: "Para Graph tour will be gone in 4 seconds",
    placement: "auto",
    duration:4000
  }
  
] , backdrop: true});

// Initialize the tour
tour.init();

// Start the tour
tour.start();
</script>

</body>
</html>

Tur bootstrap juga tidak begitu bagus, ingin bermigrasi di masa depan

0
aryan agarwal 11 Mei 2021, 13:35