Я работаю над приложением, использующим начальную загрузку 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>
Используйте 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>