如何更改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;
}