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之前总是寻找使用特异性的方法”

我建议您使用特异性来解决此问题，而不是import usb dev = usb.core.find(idProduct=0x001f) print( usb.util.get_string( dev, dev.iSerialNumber ) ) dev2 = usb.core.find(idProduct=0x0009) print( usb.util.get_string( dev2, dev2.iSerialNumber ) )，因为这被认为是不好的做法。假设将这些样式应用于!important，您可以像这样更具体：

div

Answer 3

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

max-width: 1000px !important;

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

3 个答案: