部分应用 CSS 规则答案

【问题标题】：CSS Rules are Applied Partially部分应用 CSS 规则
【发布时间】：2012-12-19 22:35:25
【问题描述】：

我正在开发一个小的vCards website。我使用Twitter Bootstrap LESS 文件作为响应和网格的基础。

我之前遇到过一个问题，网格没有响应 (Stack Overflow question)，根据答案，我意识到我必须将 responsive.less 文件与 bootstrap.less 文件一起包含才能获得响应功能。

在解决了这个问题之后，我仍然会遇到更奇怪的行为：

<div class="headline-container pull-left">
    <div class="headline-inner">
        <h1>Roland Groza</h1>
        <h4>Frontend Developer</h4>
    </div>
</div>

检查 DOM 并查找上述标记。现在，如果您开始将窗口大小调整到最小，在410px 和514px 之间，您会注意到标记将继承一些应该应用于MQ 规则@media (max-width: 480px) { } 的CSS，但只是它的一部分，因为 Twitter Bootstrap 也有一些用于该规则的 CSS，这些 CSS 仅适用于超出 410px 而不是以上的情况。

以前是否有人遇到过相同的行为，如果有，是否有解决办法？

编辑：您应该寻找的 CSS 更改是标题上的字体大小和边距/内边距：

<h1>Roland&nbsp;Groza</h1>
<h4>&lt;&nbsp;Frontend&nbsp;Developer&nbsp;/&gt;</h4>

上面的文字会有点奇怪。

【问题讨论】：

你说的是背景网格如何随着宽度的减小而扩展到全屏？
如果您谈论的两个容器元素的蓝色背景与其他尺寸的格式不同，您需要查看其他媒体尺寸的 .container、.container:before 块。当你低于一个尺寸（我忘了是什么尺寸）后，你就不再以同样的方式做背景了。
不，这是我期望的行为 :) 尝试找到我在问题描述中提到的元素，你会看到我在说什么@zmanc
你使用的是最新版的 twitter bootstrap 吗？我正在查看 responsive.less 文件，但没有看到 410px 的任何规则。也许尝试获取最新文件或使用 jsfiddle 发布已编译的 .css，以便人们可以看到您实际指的是什么。

标签： html css twitter-bootstrap responsive-design media-queries

【解决方案1】：

你的html不是你发布的，它是

<figcaption class="headline-container">
<div class="headline-inner">
<h1>Roland&nbsp;Groza</h1>
<h4>&lt;&nbsp;Frontend&nbsp;Developer&nbsp;/&gt;</h4>
</div>
</figcaption>

而且我看不到任何声明 410px 的查询（你说的应该在“超过 410px”时应用）

你能评论一下应该应用什么规则，不应该应用什么规则吗？

【讨论】：

我刚刚在一天前更新了内容，这就是为什么它不一样。但是类还是一样的。

【解决方案2】：

如果您正在谈论 <h1> 标题没有响应，您可以使用 slabText 或使用 wrapper 修复它。

【讨论】：