Раскрывающееся меню Navbar не будет работать при наличии таблицы Bootstrap - PullRequest
Новая
       51

Раскрывающееся меню Navbar не будет работать при наличии таблицы Bootstrap

1 голос
/ 03 мая 2020

У меня возникли некоторые проблемы с bootstrap.

У меня есть простая HTML веб-страница с панелью навигации с некоторыми кнопками выпадающего меню. Я заметил, что тот же код, который я использую на других страницах, не будет работать, если в теле присутствует таблица. Я полагаю, что что-то не так в том, как я структурирую таблицы, но мне не удалось выяснить это, так как я использовал стандартную и заполняю ее данными, используя javascript.

Вот часть моего HTML кода: 

<!doctype html>
<html lang="en">
    <head>
    <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="../css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <title>My Web Page Title</title>

      <style>
        .navbar-nav > li {
          padding-left:10px;
          padding-right:10px;
        }

        #mytable tr:hover {
          background-color:#F2F0F0;
        }
      </style>
    </head>

    <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container p-2">
        <a class="navbar-brand" href="#">My Brand</a>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <div class="btn-group">
            <button id="btnOne" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ButtonOne</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">DropdownOne</a>
              <a class="dropdown-item" href="#">DropdownTwo</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <div class="btn-group">
            <button id="famBtn" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ButtonTwo</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">DropdownOne</a>
              <a class="dropdown-item" href="#">DropdownTwo</a>

.... все закрывающие теги и ниже, всегда в теле тега: 

<div class="container pt-5">
  <div class="row">
    <div class="col-sm-8">
      <h3>Table Title</h3>
    </div>
    <div class="col-sm-4">
      <a type="button" href="#" class="btn btn-success">Right Table Button</a>
    </div>
  </div>
  <hr>
  <br>
  <input type="text" id="myInput" onkeyup="filterData()" placeholder="Search by name.." title="Type in a name">
  <div class="table">
    <table id="mytable" class="table table-hover">
      <!-- Here goes our data, I fill it dinamically with javascript -->
    </table>
  </div>
  <br>
</div>

<!-- some omitted Firebase scripts -->

<script src="../main.js"></script>

Я надеюсь, что код достаточно читабелен. Спасибо всем!

1 Ответ

0 голосов
/ 03 мая 2020

В раскрывающемся меню bootstrap 4 требуется bootstrap .мин. js. Убедитесь, что вы связали bootstrap .min. js

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">

...