Почему моя таблица bootstrap не рушится, когда все в порядке? - PullRequest
Новая
       5

Почему моя таблица bootstrap не рушится, когда все в порядке?

0 голосов
/ 23 апреля 2020

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

Я попробовал его, и пример работал нормально, но по какой-то причине моя таблица отказывается свернуть.

Код:

Вкладка «Назначения» 

            <table class="table">
            <thead>
                <tr>
                    <th class="lopendeopdrachten" colspan="10">Opdrachten 
                        <a class="btn" data-toggle="collapse" href="#currentassignmentdetails" aria-expanded="false" aria-controls="" style="float: right; color: #1d68a7;">
                            <i class="fas fa-caret-square-up" style="float: right;"></i>
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <div class="collapse" id="currentassignmentdetails">
                    <tr class="assignmentdetails">
                        <td>J. JANSEN<td>
                        <td>JAARDOSSIER 2019<td>
                        <td>TEAM 1<td>
                        <td>DICK<td>
                        <td>1/5/2020<td>
                    </tr>
                    <tr class="assignmentdetails">
                        <td>J. JANSEN<td>
                        <td>JAARDOSSIER 2019<td>
                        <td>TEAM 1<td>
                        <td>DICK<td>
                        <td>1/5/2020<td>
                    </tr>
                    <tr class="assignmentdetails">
                        <td>J. JANSEN<td>
                        <td>JAARDOSSIER 2019<td>
                        <td>TEAM 1<td>
                        <td>DICK<td>
                        <td>1/5/2020<td>
                    </tr>
                    <tr class="temporaryassignment">
                        <td>J. JANSEN<td>
                        <td>JAARDOSSIER 2019<td>
                        <td>TEAM 1<td>
                        <td>DICK<td>
                        <td>1/5/2020<td>
                    </tr>
                </div>
            </tbody>
        </table>

App.blade. php (основной шаблон для всех страниц) 

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Sets the project title to the app name, if none is set it defaults to Laravel -->
    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Style icons -->
    <script src="https://kit.fontawesome.com/c3cdc1c42a.js" crossorigin="anonymous"></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}" >
</head>
<body>
    <div id="app">
        @include('inc.navbar')
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

Я знаю, что отступы грязные, извините за это. Если бы кто-нибудь мог сказать мне, где могла быть конкретная ошибка, это было бы удивительно. Я дважды проверил, совпадают ли оба идентификатора (опечатка и все), и обернул вокруг него div, как и сказал сайт, но, к сожалению, ничего не произошло, что немного странно, на мой взгляд.

Bootstrap ссылка на статью ссылка : https://getbootstrap.com/docs/4.4/components/collapse/#example

Если я что-то забыл, скажите, пожалуйста.

1 Ответ

0 голосов
/ 23 апреля 2020

Похоже, что разметка у вас немного шаткая в таких местах, как кнопка переключения / ссылка и место, где вы поместили оболочку DIV. Посмотрим, поможет ли это. Я также рекомендовал бы уклоняться от встроенных стилей и переместить его в отдельный файл CSS - если можете.

HTML

<html>
<head></head>
<body>

<a class="btn btn-primary" data-toggle="collapse" href="#currentassignmentdetails" role="button" aria-expanded="false" aria-controls="collapseExample">Toggle Table</a>


<div class="collapse" id="currentassignmentdetails">

<table class="table">
  <thead>
    <tr>
      <th class="lopendeopdrachten" colspan="10">Opdrachten</th>
    </tr>
  </thead>
  <tbody>
    <tr class="assignmentdetails">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
    <tr class="assignmentdetails">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
    <tr class="assignmentdetails">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
    <tr class="temporaryassignment">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
  </tbody>
</table>

</div>

</body>
</html>

CSS

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #fff;
    border-color: #fff;
    color:#1d68a7;
    font-weight:700;
}

И если вы хотите, чтобы заголовок таблицы отображался постоянно и просто переключал строки / ячейки таблицы, вам нужно разбить его на две части. столы. Похоже, вы не можете поместить разборный DIV в середину стола (только предположение, не знаю почему).

HTML - Показать заголовок все время 

<table class="table">
  <thead>
    <tr>
      <th class="lopendeopdrachten" colspan="10">Opdrachten</th>
    </tr>
  </thead>
</table>

<div class="collapse" id="currentassignmentdetails">

<table class="table">  
  <tbody>
    <tr class="assignmentdetails">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
    <tr class="assignmentdetails">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
    <tr class="assignmentdetails">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
    <tr class="temporaryassignment">
      <td>J. JANSEN<td>
      <td>JAARDOSSIER 2019<td>
      <td>TEAM 1<td>
      <td>DICK<td>
      <td>1/5/2020<td>
    </tr>
  </tbody>
</table>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...