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

Question

Semantic-ui的侧边栏宽度为275像素。我应该在哪里添加CSS / JS来使它们更宽或更窄？

他们的代码如下：

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

如果我修改了这个部件，那么这个变化会在所有的侧边栏上都生效。 如果我改变它们内容的宽度，semantic-ui会忽略我的更改，并用默认的275px覆盖它。

您可以在此处找到侧边栏示例： http://semantic-ui.com/modules/sidebar.html#/examples

- Mihai Oprea

---

也许可以使用它的大小变化？ - gustavohenke

是的，那是一种方法，但我需要更加定制化的东西。最终我创建了一个新的尺寸变体。目前这似乎是被接受的做法。Semantic-UI的开发人员计划添加CSS变量：https://github.com/Semantic-Org/Semantic-UI/issues/216；这将使这个任务变得更加容易。 - Mihai Oprea

是的，“wide”和“very wide”两种变体有很大的区别，这可能不是你想要的，所以你的解决方案可能是最好的 :) - gustavohenke

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;
}

- Mihai Oprea

Answer 2

引用 MDN 的话："然而，使用 !important 是不好的实践，应该避免，因为它通过在样式表中破坏自然级联来使调试更加困难。"

"始终寻找在考虑使用 !important 之前使用特异性的方法"

我建议使用特异性来解决这个问题，而不是 !important，因为它被认为是一种不好的做法。假设这些样式被应用于一个 div，你可以更具体地写成这样：

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

- Galupuf

Answer 3

在你的 CSS 中，将max-width更改为一个较大的值，而不是默认值。

max-width: 1000px !important;

- LibyaPages