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 twitter-bootstrap bootstrap-4 bootstrap-5

16.02.2023 15:52

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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

Спасибо Абдул за ответ. Пожалуйста, взгляните на второе изображение выше. Я пытаюсь сделать так, чтобы слова «Тестирование» всегда отображались справа от текстового поля. В настоящее время он помещает текст «Тестирование» на следующую строку, и я не хочу, чтобы он был на следующей строке.

— 21.02.2023 15:19

17.02.2023 19:02

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

добавить d-flex класс в .tab-content
добавить следующий 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>

Чтобы еще больше выровнять Testing по центру по вертикали, вы можете просто добавить d-flex align-items-center к его контейнеру элементов <div>. <div class = "d-flex align-items-center"> <label><strong>Testing</strong></label> </div>

— 21.02.2023 17:07

Почему бы просто не использовать класс Bootstraps .flex-grow-1 вместо ненужного пользовательского CSS??

— 21.02.2023 17:40

да, вы можете использовать .flex-grow-1 вместо этого. Я не использовал его, потому что я хочу стиль все .tab-pane сразу.

— 21.02.2023 17:44

21.02.2023 17:02

Решение 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>

21.02.2023 17:26

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

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

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

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

Затем вы можете настроить свой 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>

— 22.02.2023 19:56

@RobertSmith Нет проблем, Роберт. Ваша просьба, безусловно, возможна. Что бы я сделал, так это создал новый li под ul.nav-tabs и назвал бы его как-то вроде .sgvs. Затем вы можете вложить свой SVGS (img, значок и т. д.) в этот новый li и использовать на нем класс ms-auto. .ms-auto — это класс Bootstrap, эквивалентный margin-left: auto; SVGS, который я использовал, предназначен для демонстрационных целей. См. правки выше.

— 22.02.2023 20:33

21.02.2023 17:43