html - 设置 bootstrap 下拉宽度小于 240px

Question

我正在使用 ngx-boostrap (AngularJS for Bootstrap)对于下拉菜单。

我试图让下拉菜单的 max-width 为 120px，但我从来没有小于 240px。这背后有什么原因吗

这张照片是设计

这张照片就是我正在 build 的

html、js 代码与 ngx-bootstrap 中的代码完全一样，没什么特别的。对于 css，我将 max-width=120px 放在下拉菜单及其本身的所有内容上，我无法将其变小。

什么是补救措施？

Answer 1

您走在正确的轨道上!如果您检查 .dropdown-menu，您会看到它具有以下值:

最小宽度:160px

因为你的 max-width 小于那个值，所以什么都不会发生； min-width 越大，它就会获胜。最简单的解决方案是在覆盖中重置该值:

.dropdown-menu {
  min-width: 0px;
  max-width: 120px;
}

请记住，.dropdown-menu 中超过此宽度的任何内容都会流出容器框。