Bootstrap 4.6在导航选项卡内容中创建滚动div

6kkfgxo0 于 12个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(180)

我正在使用Bootstrap 4.6。我想在导航选项卡内容中创建两个可自动滚动（当内容溢出时）的列内容。我正在尝试使用Flex实用程序。
这是我写的代码，但它没有按我想要的方式显示。

html,
body {
  height: 100%;
}

.overflow-auto {
  overflow: auto;
}

.card-main {
  overflow: hidden;
}

.max-height-0 {
  /* resolve problema de não exibir a barra de rolagem quando necessário no Firefox, Edge e IE */
  max-height: 0;
}

.max-height-1 {
  /* resolve problema de não exibir a barra de rolagem quando necessário no Firefox, Edge e IE */
  max-height: 100%;
}

个字符
“主页”选项卡的内容是正确的，左对齐。但是，“个人资料”选项卡和“联系人”选项卡的内容向右移动，我希望这些内容也左对齐。如何确保“个人资料”和“联系人”选项卡的内容使用所有空间并左对齐？

twitter-bootstrap

来源：https://stackoverflow.com/questions/77545776/bootstrap-4-6-create-scroll-div-inside-nav-tab-content

1条答案

按热度按时间

jckbn6z71#

如果您将d-flex（或任何其他显示类）放在.tab-pane上，它将干扰选项卡的工作方式 *1 *，因为所有显示类都应用于!important，覆盖了选项卡功能应用的display值。
要修复它：

从#home中删除d-flex类
将其所有内容 Package 到div.container-fluid.h-full中，
将.h-full应用于上述.container-fluid的内部.row

html,
body {
  height: 100%;
}

.overflow-auto {
  overflow: auto;
}

.card-main {
  overflow: hidden;
}

.max-height-0 {
  /* resolve problema de não exibir a barra de rolagem quando necessário no Firefox, Edge e IE */
  max-height: 0;
}

.max-height-1 {
  /* resolve problema de não exibir a barra de rolagem quando necessário no Firefox, Edge e IE */
  max-height: 100%;
}

个字符

1 * - Bootstrap选项卡将display: none或display: block分配给.tab-pane s，使用以下CSS：

.tab-content>.tab-pane {
  display: none;
}
.tab-content>.active {
  display: block;
}

型
.在您的示例中，

.d-flex {
  display: flex !important;
}

型

赞(0）回复(0）举报 12个月前

我来回答

Bootstrap 4.6在导航选项卡内容中创建滚动div

1条答案

相关问题

热门标签

最新问答