Bootstrap 5 вкладок и форма

Я работаю над приложением, использующим начальную загрузку 5. Моя проблема заключается в том, как сделать элемент формы полной ширины внутри вкладок.

Отображение вкладки с элементом формы

    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "card">
<div class = "card-body">
<div class = "d-inline-flex align-items-start">
  <div class = "nav flex-column nav-pills me-3" id = "v-pills-tab" role = "tablist" aria-orientation = "vertical">
    <a class = "nav-link active" id = "v-pills-user-tab" data-bs-toggle = "pill" href = "#v-pills-user" role = "tab" aria-controls = "v-pills-user" aria-selected = "true">Podatki o uporabniku</a>
    <a class = "nav-link" id = "v-pills-pooblastila-tab" data-bs-toggle = "pill" href = "#v-pills-pooblastila" role = "tab" aria-controls = "v-pills-pooblastila" aria-selected = "false">Profile</a>
    <a class = "nav-link" id = "v-pills-prijave-tab" data-bs-toggle = "pill" href = "#v-pills-prijave" role = "tab" aria-controls = "v-pills-prijave" aria-selected = "false">Prijave</a>
  </div>
  <div class = "tab-content " id = "v-pills-tabContent">
    <div class = "tab-pane fade show active " id = "v-pills-user" role = "tabpanel" aria-labelledby = "v-pills-user-tab">
      <form id = "posodobi_uporabnika">
      <div class = "form-floating mb-3">
        <input type = "email" class = "form-control" id = "floatingInput" placeholder = "[email protected]">
        <label for = "floatingInput">Email address</label>
      </div>
    </form>
    </div>
    <div class = "tab-pane fade" id = "v-pills-pooblastila" role = "tabpanel" aria-labelledby = "v-pills-pooblastila-tab">Pooblastila</div>
    <div class = "tab-pane fade" id = "v-pills-prijave" role = "tabpanel" aria-labelledby = "v-pills-prijave-tab">Prijave</div>
  </div>
</div>
</div>
    <div class = "tab-pane fade" id = "v-pills-messages" role = "tabpanel" aria-labelledby = "v-pills-messages-tab">...</div>
    <div class = "tab-pane fade" id = "v-pills-settings" role = "tabpanel" aria-labelledby = "v-pills-settings-tab">...</div>
  </div>
</div>      
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
3 995
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте d-flex вместо d-inline-flex для родителя. Используйте flex-grow-1 на tab-content...

  <div class = "d-flex align-items-start">
                <div class = "nav flex-column nav-pills me-3" id = "v-pills-tab" role = "tablist" aria-orientation = "vertical">
                    <a class = "nav-link active" id = "v-pills-user-tab" data-bs-toggle = "pill" href = "#v-pills-user" role = "tab" aria-controls = "v-pills-user" aria-selected = "true">Podatki o uporabniku</a>
                    <a class = "nav-link" id = "v-pills-pooblastila-tab" data-bs-toggle = "pill" href = "#v-pills-pooblastila" role = "tab" aria-controls = "v-pills-pooblastila" aria-selected = "false">Profile</a>
                    <a class = "nav-link" id = "v-pills-prijave-tab" data-bs-toggle = "pill" href = "#v-pills-prijave" role = "tab" aria-controls = "v-pills-prijave" aria-selected = "false">Prijave</a>
                </div>
                <div class = "tab-content flex-grow-1" id = "v-pills-tabContent">
                    <div class = "tab-pane fade show active " id = "v-pills-user" role = "tabpanel" aria-labelledby = "v-pills-user-tab">
                        <form id = "posodobi_uporabnika">
                            <div class = "form-floating mb-3">
                                <input type = "email" class = "form-control" id = "floatingInput" placeholder = "[email protected]">
                                <label for = "floatingInput">Email address</label>
                            </div>
                        </form>
                    </div>
                    <div class = "tab-pane fade" id = "v-pills-pooblastila" role = "tabpanel" aria-labelledby = "v-pills-pooblastila-tab">Pooblastila</div>
                    <div class = "tab-pane fade" id = "v-pills-prijave" role = "tabpanel" aria-labelledby = "v-pills-prijave-tab">Prijave</div>
                </div>
  </div>

Демо

Другие вопросы по теме