如何使Bootstrap看起来更“紧凑”

Question

我希望拥有相同的“紧凑”外观 - 使用font-size，padding以及我使用浏览器缩小（Ctrl--）时获得的空间的一般用法。当然没有副作用，最重要的是减少容器宽度。

我尝试在Bootstrap的http://getbootstrap.com/2.3.2/customize.html下载屏幕中摆弄@baseFontSize和@baseLineHeight个变量，但我遗漏了一些结果：

1. 看起来不对 - 就平衡而言，填充不正确。

2. 在投影仪屏幕上打破（恐怖！） - 选择框，布局，一切都变得疯狂。

请保释我！

Answer 1

我想知道这是否是与响应式样式表有关的问题。在不知道您是否使用响应式样式表的情况下，很难给出确定的答案。但如果你是这样，布局将不会与更大的屏幕保持成比例，因为它具有响应性。因此，如果您确实打开了该样式表，请尝试将其删除。

Answer 2

我有两个建议。

首先，您是否按照上面的链接使用Bootstrap 2.3.2？通过使用boostrap 3.0（及更高版本）的新脚手架，您可以更轻松地解决问题。升级您的网站有点痛苦，但有自动转换器，新系统可以更好地使用，并可能有所帮助。

其次，你应该研究的另一个CSS技巧是font-weight和line-height。字体粗细可以使文字更薄/更厚（等级为100,200,300,400等......）。您可能能够使字体更薄，线条高度更低，但整体字体更大，这将“紧凑”的东西。如果你不知道它值得尝试。

  font-weight: 200;
  line-height: 30px;