Bootstrap 5 - Как отображать содержимое вкладки, чтобы всегда отображать справа

Используя Bootstrap 5, я могу отображать содержимое вкладки, которое всегда отображается (независимо от того, на какой вкладке находится пользователь):

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">

<!-- Tabs navs -->
<ul class = "nav nav-tabs" id = "tabNavs01">
  <li class = "nav-item"><a id = "t-customer" data-bs-toggle = "tab" class = "nav-link active" href = "#tabcustomer">customer</a></li>
  <li class = "nav-item"><a id = "t-position" data-bs-toggle = "tab" class = "nav-link" href = "#tabposition">position</a></li>
</ul>
<!-- Tabs content -->
<div class = "tab-content col-md-7 flex-nowrap" id = "tabCont01">
  <div class = "tab-pane fade show active" id = "tabcustomer">
    <div class = "input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type = "text" value = "" name = "" id = "txtcustomer" placeholder = "customer" class = "form-control add-main" onclick = "validatecustomer();">
      <input type = "text" value = "" name = "" id = "txtcomputer" placeholder = "computer" class = "form-control add-computer" onclick = "validatecustomer();">
    </div>
  </div>
  <div class = "tab-pane fade" id = "tabposition">
    <div class = "input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type = "text" value = "" name = "" id = "txtposition" placeholder = "position" class = "form-control position-box" onclick = "searchByposition();">
    </div>
  </div>
  <div>
    <label><strong>Testing</strong></label>
  </div>
</div>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>

Это создает область «Тестирование», которая появляется на обеих вкладках по желанию:

Мой вопрос: как я могу заставить этот текст «Тестирование» отображаться справа от обеих вкладок? Я пытаюсь поместить его в это место внутри «белой» области и выровнять со словами «ВВОД», как показано здесь:

Спасибо, Камерон, ваше решение ниже сработало хорошо. Я наградил тебя наградой. Если бы я хотел добавить несколько svg в эту область, было бы это возможно, например, эти изображения facebook/twitter:

🤔 А знаете ли вы, что...
С помощью CSS можно создавать эффекты тени, градиенты и прозрачность для элементов.


1
65
4

Ответы:

Чтобы отобразить содержимое вкладки, которое всегда отображается независимо от того, на какой вкладке в данный момент находится пользователь, используя Bootstrap 5, вы можете добавить классы «show active» к элементу содержимого первой вкладки. Это гарантирует, что содержимое будет отображаться по умолчанию и не будет скрыто при переключении между вкладками.


Я добавил два изменения, чтобы добиться этого на основе вашей структуры.

  1. добавить d-flex класс в .tab-content
  2. добавить следующий css .tab-pane { flex-grow: 1; }

Посмотрите на результат фрагмента.

Надеюсь, это поможет и удачного кодирования!

.tab-pane {
  flex-grow: 1;
}
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>

<ul class = "nav nav-tabs" id = "tabNavs01">
  <li class = "nav-item"><a id = "t-customer" data-bs-toggle = "tab" class = "nav-link active" href = "#tabcustomer">customer</a></li>
  <li class = "nav-item"><a id = "t-position" data-bs-toggle = "tab" class = "nav-link" href = "#tabposition">position</a></li>
</ul>
<!-- Tabs content -->
<div class = "tab-content col-md-7 d-flex flex-nowrap" id = "tabCont01">
  <div class = "tab-pane fade show active" id = "tabcustomer">
    <div class = "input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type = "text" value = "" name = "" id = "txtcustomer" placeholder = "customer" class = "form-control add-main" onclick = "validatecustomer();">
      <input type = "text" value = "" name = "" id = "txtcomputer" placeholder = "computer" class = "form-control add-computer" onclick = "validatecustomer();">
    </div>
  </div>
  <div class = "tab-pane fade" id = "tabposition">
    <div class = "input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type = "text" value = "" name = "" id = "txtposition" placeholder = "position" class = "form-control position-box" onclick = "searchByposition();">
    </div>
  </div>
  <div>
    <label><strong>Testing</strong></label>
  </div>
</div>

Решение Bootstrap 5, без дополнительного CSS

Это самое простое решение. Добавьте класс w-100 три раза (т. е. один раз в tab-content и дважды в tab-pane).

См. фрагмент ниже.

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>

<ul class = "nav nav-tabs" id = "tabNavs01">
  <li class = "nav-item"><a id = "t-customer" data-bs-toggle = "tab" class = "nav-link active" href = "#tabcustomer">customer</a></li>
  <li class = "nav-item"><a id = "t-position" data-bs-toggle = "tab" class = "nav-link" href = "#tabposition">position</a></li>
</ul>
<!-- Tabs content -->
<div class = "tab-content col-md-7 d-flex flex-nowrap w-100" id = "tabCont01">
  <div class = "tab-pane fade show active w-100" id = "tabcustomer">
    <div class = "input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type = "text" value = "" name = "" id = "txtcustomer" placeholder = "customer" class = "form-control add-main" onclick = "validatecustomer();">
      <input type = "text" value = "" name = "" id = "txtcomputer" placeholder = "computer" class = "form-control add-computer" onclick = "validatecustomer();">
    </div>
  </div>
  <div class = "tab-pane fade w-100" id = "tabposition">
    <div class = "input-group flex-nowrap">
      <h2>ENTER:&nbsp;&nbsp;</h2>
      <input type = "text" value = "" name = "" id = "txtposition" placeholder = "position" class = "form-control position-box" onclick = "searchByposition();">
    </div>
  </div>
  <div class = "d-flex align-items-center">
    <label><strong>Testing</strong></label>
  </div>
</div>

Решено

Чтобы получить «Тестирование» рядом с tab-content, вы должны использовать .d-flex для родителя .tab-pane. У вас уже был .flex-nowrap, но он недействителен без .d-flex или другого flex класса.

Затем вы можете просто использовать класс Bootstraps .flex-grow-1 для первого и второго дочерних элементов для .tab-content.

Используйте утилиты .flex-grow-*, чтобы переключать способность гибкого элемента увеличиваться, чтобы заполнить доступное пространство.

Затем вы можете настроить свой widths и т. д., но пока у вас есть d-flex на родительском элементе с .flex-nowrap, у вас всегда будет нужный «тестовый» div рядом с каждым .tab-pane.

/* for SVG demo only */

svg[aria-label = "Facebook"] {
  background: #3b5998;
}

svg[aria-label = "Twitter"] {
  background: #55acee;
}
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">

<!-- Tabs navs -->
<ul class = "nav nav-tabs align-items-center" id = "tabNavs01">
  <li class = "nav-item"><a id = "t-customer" data-bs-toggle = "tab" class = "nav-link active" href = "#tabcustomer">customer</a></li>
  <li class = "nav-item"><a id = "t-position" data-bs-toggle = "tab" class = "nav-link" href = "#tabposition">position</a></li>
  <li class = "svgs ms-auto me-2">
    <svg role = "img" aria-label = "Facebook" width = "30" height = "30">
      <title>Facebook</title>
    </svg>
    <svg role = "img" aria-label = "Twitter" width = "30" height = "30">
      <title>Twitter</title>
    </svg>
  </li>
</ul>
<!-- Tabs content -->
<div class = "tab-content d-flex col-md-7 flex-nowrap align-items-center" id = "tabCont01">
  <div class = "tab-pane fade show active flex-grow-1" id = "tabcustomer">
    <div class = "input-group flex-nowrap">
      <h2 class = "me-2">ENTER:</h2>
      <input type = "text" value = "" name = "" id = "txtcustomer" placeholder = "customer" class = "form-control add-main" onclick = "validatecustomer();">
      <input type = "text" value = "" name = "" id = "txtcomputer" placeholder = "computer" class = "form-control add-computer" onclick = "validatecustomer();">
    </div>
  </div>
  <div class = "tab-pane fade flex-grow-1" id = "tabposition">
    <div class = "input-group flex-nowrap">
      <h2 class = "me-2">ENTER:</h2>
      <input type = "text" value = "" name = "" id = "txtposition" placeholder = "position" class = "form-control position-box" onclick = "searchByposition();">
    </div>
  </div>
  <div class = "ms-2">
    <label><strong>Testing</strong></label>
  </div>
</div>



<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>