Question

我正在开发一个小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规则的CSS {{ 1}}，但只是其中的一部分，因为Twitter Bootstrap也有一些针对该规则的CSS，仅在超出@media (max-width: 480px) { }而不是高于410px时应用。

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

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

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

上面的文字会有点奇怪。

Answer 1

如果您所说的<h1>标题没有响应，可以使用slabText或使用wrapper进行修正。

Answer 2

你的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”时应用）

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

CSS规则部分应用

2 个答案: