0

好的，所以我正在使用 Bootstrap Studio 创建一个在每个页面上都有多个卡片的站点，并且最初使用来自 sb-admin-2 模板的卡片。一切都很顺利——在我的引导工作室视图中，我的三列卡片宽度相同，并且以正确的方式彼此相邻。但是，当我在浏览器中测试代码时，它只显示了两列布局。我猜这是一个与 sb-admin-template 设置的 col 约束相关的 CSS 相关问题（包含在下面的代码部分中），但我很困惑如何覆盖它们以纠正列布局。我只需要这个特定页面的特定布局，所以我不知道该怎么做。

我尝试通过复制/编辑样式表中的代码并关闭下面的约束来覆盖它。但由于某种原因，它不起作用。

Bootstrap Studio 列视图

列的浏览器视图

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: .75rem;
  padding-left: .75rem;
}
4

1 回答 1

0

CSS 优先级从低到高：

• 标签选择器（最低优先级）div {...} span {...}等
• 类选择器.class {...}
• #id {...}
• 内联样式style="..."
•anything { property: value !important; }

使用重要是不好的做法，因为将来您可能想覆盖重要的样式，有时没有办法。+ 它可能会导致 JavaScript 出现问题。

所以，首先你可以尝试在body标签中添加一个id。并将该样式提供给选择器

#body-id .col, #body-id .col-1 ....或者可能#body-id [class^="col"] {...}

如果这没有帮助...

width: 100% !important;
padding-right: .75rem !important;
padding-left: .75rem !important;
于 2019-08-10T04:22:02.383 回答