css Bootstrap 5 -如何显示选项卡内容以始终显示在右侧

6vl6ewon 于 2023-02-26 发布在 Bootstrap

关注(0)|答案(3)|浏览(464)

使用Bootstrap 5，我能够显示始终显示的选项卡内容（无论用户在哪个选项卡中）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

这将生成根据需要出现在两个选项卡中的“测试”区域：

我的问题是如何使“测试”文本显示在两个选项卡的右侧？我尝试将其放置在“白色”区域内的此位置，并与单词“ENTER”对齐，如下图所示：

谢谢你Kameron，你下面的解决方案工作得很好。我授予你奖金。如果我想在这方面添加一些svg，是否可能，如这facebook/twitter图片：

css

来源：https://stackoverflow.com/questions/75474007/bootstrap-5-how-to-display-tab-content-to-always-display-to-the-right

3条答案

按热度按时间

ffdz8vbo1#

若要在tab-content旁边获取**"Testing"**，必须在.tab-pane父级上使用.d-flex。您已经有.flex-nowrap，但如果没有.d-flex或其他flex类，它将无效。
接下来，您可以在.tab-content的第一个和第二个子对象上使用Bootstrap .flex-grow-1类。
使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。

Flex· Bootstrap v5.3

然后，您可以配置widths等，但只要您在具有.flex-nowrap的父节点上具有d-flex，您将始终在每个.tab-pane旁边具有所需的**"Testing"**div。

/* for SVG demo only */

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

svg[aria-label="Twitter"] {
  background: #55acee;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-02-26

zed5wv102#

要使用Bootstrap 5显示选项卡内容，无论用户当前在哪个选项卡中，该选项卡内容始终显示，您可以将“show active”类添加到第一个选项卡的content元素中。这将确保默认情况下内容可见，并且在选项卡之间切换时不会隐藏。

赞(0）回复(0）举报 2023-02-26

3b6akqbq3#

我根据您的结构添加了两项更改以实现此目的
1.将d-flex类添加到.tab-content
1.添加以下css .tab-pane { flex-grow: 1; }
查看代码段结果。
希望它有帮助，并快乐编码!

.tab-pane {
  flex-grow: 1;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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>

赞(0）回复(0）举报 2023-02-26

我来回答

css Bootstrap 5 -如何显示选项卡内容以始终显示在右侧

3条答案

相关问题

热门标签

最新问答