Bootstrap 4: содержимое вкладок навигации не отображает содержимое при начальной загрузке страницы - PullRequest
Новая
       27

Bootstrap 4: содержимое вкладок навигации не отображает содержимое при начальной загрузке страницы

0 голосов
/ 01 октября 2018

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

Если я нажму на вкладку «Ссылка» и вернусь на вкладку «Опубликовать», то она отобразится. 

<div class="container">
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item">
                    <a class="active nav-link" href="#post" data-toggle="tab">Post</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#link" data-toggle="tab">Link</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane" id="post">post</div>
                <div class="tab-pane" id="link">link</div>
            </div>
        </div>
    </div>
</div>

При загрузке страницы это выглядит так (div с tab-pane класс не был отображен):

enter image description here

В моей консоли нет ошибок, и загружается JS-файл начальной загрузки.Есть несколько похожих вопросов, но решения для меня не сработали.

Что мне нужно добавить, чтобы панель вкладок отображалась при загрузке страницы?

1 Ответ

0 голосов
/ 01 октября 2018

Проверьте это 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item">
                    <a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#link" data-toggle="tab">Link</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane active" id="post">post</div>
                <div class="tab-pane" id="link">link</div>
            </div>
        </div>
    </div>
</div>
...