Question

我正在运行当前代码，同时包含最新Bootstrap的标准和响应式CSS。

我无法理解为什么当我增加字体大小时，行根本没有响应并且文本当前正在重叠。

任何建议都会有所帮助，因为我是Bootstrap的新手。我也知道这很麻烦，但这是一种快速简单的方法来测试我的想法。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12" style=" text-align:center;">
        <p style="font-size:6em;  font-weight:bold;">LARGE TEXT</p>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span12" style="text-align:center; font-size:3em; font-weight:bold;">
        <p>Date 02/02/2013</p>
    </div>
  </div>
</div>

Answer 1

您需要重置p元素的行高。行高从主体规范继承，默认情况下设置为20px。

将样式更改为style="font-size:6em; line-height:normal; font-weight:bold;"应该可以解决问题。

请参阅http://jsfiddle.net/7EXmD/1/。

我不建议以这种方式为生产用途设计元素，但正如您所说，对于测试，这是如何使其工作。

Answer 2

该行不响应文本大小，该行响应浏览器窗口的大小。如果您使用的是响应式布局，则应考虑使用@media query来缩小文本的大小，使其适当调整，因为所有内容都应缩小，而不仅仅是包含的跨度。

Bootstrap Fluid Rows重叠

2 个答案: