Bootstrap: DIV между NAV и NAV-LINK - PullRequest
Новая
       49

Bootstrap: DIV между NAV и NAV-LINK

0 голосов
/ 18 марта 2020

Bootstrap Nav НЕ РАБОТАЕТ, если DIV находится между NAV CLASS и NAV LINK

Итак, я хочу сделать что-то похожее на Bootstrap Pills, но без использования стиля по умолчанию для таблеток.

Активный класс остается во всех навигационных ссылках. Это происходит из-за того, что я добавил div между nav и

Мне нужен этот div. Это код: https://www.codeply.com/p/mKvBKQBWX3

<div class="nav nav-pills" role="tablist">

    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <a class="nav-link active" id="first" data-toggle="pill" href="#first-content" role="tab" aria-controls="first-content" aria-selected="true">
            First
            <!-- More content -->
        </a>
    </div>

    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <a class="nav-link" id="second" data-toggle="pill" href="#second-content" role="tab" aria-controls="second-content" aria-selected="true">
            Second
            <!-- More content -->
        </a>
    </div>

    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <a class="nav-link" id="third" data-toggle="pill" href="#third-content" role="tab" aria-controls="third-content" aria-selected="true">
            Third
            <!-- More content -->
        </a>
    </div>

    <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <a class="nav-link" id="fourth" data-toggle="pill" href="#fourth-content" role="tab" aria-controls="fourth-content" aria-selected="true">
            Fourth
            <!-- More content -->
        </a>
    </div>

</div>

<div class="tab-content" id="card-content">
    <div class="tab-pane fade-animation active" id="first-content" role="tabpanel" aria-labelledby="first">
        <h3>First Content</h3>
    </div>

    <div class="tab-pane fade-animation" id="second-content" role="tabpanel" aria-labelledby="second">
        <h3>Second Content</h3>
    </div>

    <div class="tab-pane fade-animation" id="third-content" role="tabpanel" aria-labelledby="third">
        <h3>Third Content</h3>
    </div>

    <div class="tab-pane fade-animation" id="fourth-content" role="tabpanel" aria-labelledby="fourth">
        <h3>Fourth Content</h3>
    </div>
</div>

Есть ли какое-нибудь решение, которое я могу сделать, чтобы "nav" работал и сохранял div?

Спасибо!

...