如何让 Bootstrap 看起来更“紧凑”答案

【问题标题】：How to make Bootstrap look more "Compact"如何让 Bootstrap 看起来更“紧凑”
【发布时间】：2013-09-06 05:31:20
【问题描述】：

我希望拥有与使用浏览器缩小 (Ctrl--) 时相同的“紧凑”外观 - 在 font-size、padding 和一般空间使用方面。当然没有副作用，最重要的是减少容器宽度。

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

看起来不对 - 就平衡而言，填充是不对的。
投影仪屏幕中断（恐怖！） - 选择框、布局，一切都变得疯狂。

请保释我！

【问题讨论】：

如果我理解你的问题是正确的，在缩小时，你想保持文本的行为原样，同时保持容器的宽度相同吗？很明显，缩小会减小容器的宽度，除非您使用 100% 宽度或使用 javascript 调整大小（查看 Google 驱动器）。我建议提供网页或小提琴，并解释您希望在实际项目中实现的目标。
@maremp 我提到了浏览器缩小，因为它与所需的最终结果密切相关，即在保持正确比例的同时减小内容大小和空间（字段、表格单元格等中的填充） .随着解决方案的发展，我希望在 CSS 而不是 Javascript 中做到这一点，因为我本质上不是在寻找活力。这就是为什么我没有发布小提琴。不过，感谢您的评论，它让我能够更清楚地说明问题（希望如此）。

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

当我说它在投影仪屏幕上中断时，我指的是单个组件，而不是整体布局。例如，调整 baseFontSize 会使输入看起来很奇怪，因为文本不再垂直居中对齐。如果我然后摆弄baseLineHeight，文本会是正确的，但选择框右侧的箭头会中断。

【解决方案2】：

我有两个建议。

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

其次，您应该研究的另一个 CSS 技巧是字体粗细和行高。字体粗细可以使您的文本更薄/更厚（等级为 100、200、300、400 等...）。您可能可以使字体更薄，线高更低，但整体字体更大，这将“紧凑”事物。如果你不知道它值得一试。

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

【讨论】：

没有。 font-weight 和 line-height 组合不会产生预期的效果。

【解决方案3】：

Bootstrap Table Compact

 table-sm
    To reduce the cell padding on your tables add a class .table-sm to your Bootstrap table. 
    Example below
    
    <table class="table table-sm">

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。