Bootstrap 4 навигационные вкладки, чтобы сохранить расположение на экране мобильного телефона - PullRequest
Новая
       9

Bootstrap 4 навигационные вкладки, чтобы сохранить расположение на экране мобильного телефона

1 голос
/ 18 апреля 2020

Я изо всех сил пытаюсь заставить Bootstrap 4 навигационных вкладок действовать по-настоящему отзывчиво.

Я прикрепил код и вот демонстрация того, что мне нужно.

bootstrap nav-tabs

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container p-4">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">First really long nav</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second really long nav</a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Content of the first tab.</div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Content of the second tab.</div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

1 Ответ

1 голос
/ 18 апреля 2020

Используйте flex-nowrap класс в вашем nav классе 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container p-4">
    <nav>
        <div class="nav nav-tabs flex-nowrap" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">First really long nav</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second really long nav</a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Content of the first tab.</div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Content of the second tab.</div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
...