Question

我有一个带有global.css类的MVC4项目，我添加了最近的引导程序，但结果是在我的global.css类中我有一些具有相同名称的类，所以我决定创建一个{ {1}}我把一些带有前缀类bootstrap_migration.css的bootstrap类放在我的html中，我把.bt之类的内容放在一边，一切正常。

我class="bt container"上的这样的事情：

bootstrap_migration.css

但我有更好的方法吗？

Answer 1

你不应该在课堂上留一个空格。它应该是

.bt.jumbotron

编辑：.bt .jumbotron表示.jumbotron是.bt的子节点，不适用于同一元素。

Answer 2

.bt.jumbotron

不要在班级之间留空格。

班级之间的空间意味着他们是另一个人的孩子。

Answer 3

添加一个新的css文件，例如“booststrap-custom.css”并在之后包含它！你的bootstrap.css在html标题中。

示例：

<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootrstrap-custom.css" />

然后，只需将元素定义复制到自定义文件中并覆盖自定义属性，就可以覆盖任何引导类而无需触及bootstrap.css文件。

Firebug是一个非常有用的工具，可以复制您想要更改的元素。

示例：

如果你有bootstrap.css并且它包含：

.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: #eeeeee;
}

你只想覆盖填充，例如你将它插入你的bootstrap-custom.css

.jumbotron {
    padding: 30px;
}

瞧，你已经完成了！

这种方式你不需要也永远不应该触摸你的原始bootstrap.css

Answer 4

如果您使用源代码引导，则可以更轻松地自定义引导程序文件。less（can be downloaded here，使用Download source code link）

使用LESS，您可以嵌套类，以便您可以更轻松地对所有受感染的类应用更改。而且您可以非常轻松地进行大量额外的自定义。

如果将Web Essentials extension添加到Visual Studio，则只要您编辑它，就会更新此文件。

解决方案的其余部分无法以更好的方式完成。

覆盖相同的bootstrap类以使用bootstrap css？

4 个答案: