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

6kkfgxo0  于 12个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(181)

我正在使用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%;
}

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

jckbn6z7

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: nonedisplay: block分配给.tab-pane s,使用以下CSS:
.tab-content>.tab-pane {
  display: none;
}
.tab-content>.active {
  display: block;
}


.在您的示例中,

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

相关问题