如何更改semantic-ui侧边栏的默认宽度？

Question

Semantic-ui侧边栏宽275px。我应该在哪里添加使它们更宽或更窄的css / js？

他们的代码是

.ui.sidebar {
   width: 275px!important;
   margin-left: -275px!important;
}

如果我修改了这个，那么所有侧边栏的更改都是全局的。如果我更改其内容的宽度，则semantic-ui会忽略我的更改并使用默认的275px覆盖它。

你可以在这里找到侧栏示例：http://semantic-ui.com/modules/sidebar.html#/examples

Answer 1

一种方法是只添加一个新类：

.ui.custom.sidebar {
  width: 315px !important;
  margin-left: -315px !important;
}

.ui.active.custom.sidebar {
  margin-left: 0px !important;
}

.ui.active.right.custom.sidebar {
  margin-left: -315px !important;
}

Answer 2

引用MDN：“然而，使用！important是不好的做法，应该避免使用，因为它会破坏样式表中的自然级联，从而使调试变得更加困难。”

“在考虑之前总是寻找一种使用特异性的方法！重要”

我建议使用特异性来解决这个问题，而不是!important，因为它被认为是一种不好的做法。假设这些样式正在应用于div，您可以更加具体，如下所示：

div.ui.sidebar {
   width: 275px
   margin-left: -275px;
}

Answer 3

将max-width更改为更大的值，而不是css中的默认值。

max-width: 1000px !important;