0

我在使用 Twitter Bootstrap 的网站上遇到了一个恼人的“问题”。我有一个使用默认 .container 引导类的主容器，并且在我的自定义 css 文件中给了它一个特定的宽度。但是，当我将 bootstrap-responsive.css 文件包含到我的 HTML 文档中时，它似乎覆盖了我的容器的宽度。

这是我的 CSS 文件的顺序：

 <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/> 
 <link rel="stylesheet" type="text/css" href="/css/Site.css"/>
 <link rel="stylesheet" href="/css/bootstrap-responsive.css"/>

由于什么原因在响应式 css 文件中指定了宽度？有没有一种平滑的方法可以在不手动编辑 bootstrap-responsive.css 的情况下解决这个问题（我认为这不是一个好主意）

我需要 bootstrap-responsive.css 以使我的网站适合移动设备/平板电脑。

4

3 回答 3

1

引导程序中的最小宽度是保持正确结构所必需的。另一方面，您可以简单地将您的 css 代码放在bootstrap 响应之后，这样您的规则将覆盖 bootstrap 的规则。

于 2013-02-23T10:20:10.783 回答
0

就个人而言，我倾向于在所有其他 CSS 文件之后加载我自己的自定义样式表。但是，您必须确保不要更改全局属性的任何默认值......或布局相关的属性，即：.container

通常，此类会被多次重复使用，并且可能会针对不同的设备和情况进行调整。所以，我建议在 bootstrap-responsive.css 中更改这些值，这是包含所有媒体查询的文件。

否则，您最终会覆盖您想要的响应能力，这可能会导致 CSS 属性出现 !important 异常。应该通过一切手段避免这种情况。

于 2013-04-03T23:11:11.670 回答
0

使用 CSS 时，样式信息的最后一个实例具有优先权。例如，如果我链接到两个不同的样式表，如果有冲突，第二个将优先...

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

在本例中，如果 .container 元素在 style.css 文件中发生变化，则 style.css 中的样式数据只有在发生冲突时才会优先考虑。这种效果类似于在单个 HTML 文档中同时拥有外部和内联 CSS。这是一个 jsFiddle来说明。在这里，您可以看到内联样式具有优先权，并使文本的颜色变为橙色，同时保持背景为黑色。

于 2013-04-04T00:09:05.253 回答