Question

例如，平板电脑容器尺寸由以下因素确定：

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

在Semantic Container document中提及。

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

Answer 1

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

那就是说，这将要求你重建语义用户界面，如果你想改变的唯一的东西是平板电脑的宽度，我认为这可能不值得。我只是添加一些额外的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>

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

1 个答案: