5

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

4

3 回答 3

6

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

.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;
}
于 2014-03-02T17:07:27.937 回答
1

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

“在考虑 !important 之前，始终寻找一种使用特异性的方法”

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

div.ui.sidebar {
   width: 275px
   margin-left: -275px;
}
于 2019-03-26T13:12:55.067 回答
-1

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

max-width: 1000px !important;
于 2015-03-05T15:15:26.350 回答