如何在语义UI中自定义容器宽度

Question

例如，平板电脑容器的大小取决于：

/* In container.variables */
@tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;

语义容器文档中提到了。

但是我不希望平板电脑的容器大小如此，我希望它更小，因此要自定义容器大小，应该修改哪个文件以及如何修改？

Answer 1

有问题的行（在撰写本文时）在container.variables内部。但是，我敦促您修改（增加）@tabletMinimumGutter而不是直接更改宽度。

就是说，这将需要您重建语义UI，如果您要更改的唯一内容就是平板电脑的宽度，那么我认为这不值得。取而代之的是，我只需要向页面添加一些额外的CSS，就像这样，它将覆盖语义UI设置的宽度（在此示例中，我想要的容器宽度是723px，但是您可以使用任何东西）：

<link rel="stylesheet" type="text/css" href="semantic.css">
<style>
/* You probably want this in a separate CSS file */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ui.container {
    width: 723px;
  }

  .ui.grid.container {
    width: calc( 723px  +  2rem ) !important;
  }

  .ui.relaxed.grid.container {
    width: calc( 723px  +  3rem ) !important;
  }

  .ui.very.relaxed.grid.container {
    width: calc( 723px  +  5rem ) !important;
  }
}
</style>