Blog Nodeloc

记录一些NodeLoc发展中遇到的问题及解决方法

29 8 月, 2024

FOF Links的两个微调整

FOF Links如果菜单较多，在低分辨率下会把菜单行挤压换行。

虽然有平板模式，但平板模式最大是768px，如果菜单较多还是会换行。

改一下css就可以,把宽度设置为最小768，最大1399，这样子。

  & when (@fof-links-show-only-icons-on-mobile = true) {
    //@media @tablet {
    @media (min-width: 768px) and (max-width: 1399px) {
      &-icon {
        margin-right: 0;
      }

      &-title {
        display: none;
      }
    }
  }

另外，下拉菜单的宽度如果比较长，建议增加宽度，增加 `min-width` 到200px比较好。

.LinkDropdown ul {
  min-width: 200px;
  li {
    .Dropdown-separator {
      display: block !important;
    }

    &:nth-child(2) .Dropdown-separator:first-of-type, &:last-child .Dropdown-separator:last-of-type {
      display: none !important;
    }

    &:has(.Dropdown-separator) + li .Dropdown-separator:first-of-type {
      display: none;
    }
  }

  .LinksButton {
    color: var(--button-color, @control-color) !important;

    &--label {
      color: @heading-color !important;
    }

    &-icon {
      margin-top: 2px;
      margin-right: 7px;
    }

    &-title {
      display: inline;
    }

    &:hover,
    &:active,
    &:focus {
      background: @control-bg !important;
    }
  }
}

发表回复取消回复