如何使Bootstrap看起来更加"紧凑"

Question

我希望在IT技术相关中拥有与浏览器缩小（Ctrl--）时相同的“紧凑”外观，包括字体大小 、 内边距 和对空间的一般使用。当然，最重要的是不会产生任何副作用，特别是容器宽度的减少。

我已经尝试过在Bootstrap的http://getbootstrap.com/2.3.2/customize.html下载页面中调整@baseFontSize和@baseLineHeight变量，但结果出现以下问题：

1. 看起来不对-平衡不正确，内边距不对。

2. 在投影仪屏幕上出现问题（真是太可怕了！）-选择框、布局，以及其他全部都混乱了。

请救救我！

- Ali Zaidi

---

如果我理解你的问题正确，缩小视图时，你想保持文本的行为不变，但同时也保持容器的宽度不变？很明显，缩小视图会减少容器的宽度，除非你使用100％的宽度或使用JavaScript调整大小（参见Google Drive）。我建议提供网页或一个fiddle，并解释你在实际项目中想要实现什么。 - Marko Gresak

@maremp 我提到浏览器缩小是因为它与期望的最终结果密切相关，即在保持正确比例的同时减小内容大小以及空间（字段、表格单元格中的填充等）。至于解决方案，我希望在CSS中完成，而不是在Javascript中完成，因为本质上我不需要动态性。这就是为什么我没有发布一个fiddle。感谢您的评论，它让我能够更清晰地表达我的意思（希望如此）。 - Ali Zaidi

Answer 1

在您的HTML标签中使用媒体查询并使用基于rem单位的方式，这样做有何影响？也许现在开始有些晚了，但我发现这是一种方便的方法来控制间距。

html{
    background: $black;
      scroll-behavior: smooth;
    padding:0;
    margin:0;
        @media screen and (min-width: 2560px){
                font-size:16px;
        }
        @media screen and (min-width: 1920px) and (max-width: 2559px){
                font-size:15px;
        }
        @media screen and (min-width: 1681px) and (max-width: 1919px){
                font-size:15px;
        }
        @media screen and (min-width: 1441px) and (max-width: 1680px){
                font-size:13px;
        }
        @media screen and (min-width: 1366px) and (max-width: 1440px){
            font-size:13px;
        }
        @media screen and (min-width: 1024px) and (max-width: 1365px){
            font-size:12px;
        }
        @media screen and (min-width:992px) and (max-width: 1023px) {
            font-size:12px;
        }
        @media screen and (min-width:768px) and (max-width: 991px) {
            font-size:12px;
        }
        @media screen and (min-width:441px) and (max-width:767px) {
                font-size:12px;
        }
        @media screen and (min-width:351px) and (max-width:440px) {
                font-size:12px;
        }
        @media screen and (max-width:350px) {
                font-size:12px;
        }

- Double Marvellous

Answer 2

Bootstrap表格紧凑型

 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">

- Mahima Sachdeva

---

你的答案可以通过提供额外的支持信息来改进。请编辑以添加更多细节，例如引用或文档，以便他人可以确认您的答案正确无误。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 3

我在想这个问题是否与响应式样式表有关。如果你使用响应式样式表，那么没有确切的答案。但是，如果是这样的话，布局不会随着屏幕变大而保持比例。所以，如果你确实使用了这个样式表，请尝试将其删除。

- innerurge1

---

当我说在投影屏幕上出现问题时，我的意思是指单个组件而不是整体布局。例如，调整baseFontSize会使输入框看起来奇怪，因为文本不再垂直居中对齐。如果我接着调整baseLineHeight，文本就会变得正确，但选择框右侧的箭头会出现问题。 - Ali Zaidi

Answer 4

我有两个建议。

首先，你是否按照上面的链接使用Bootstrap 2.3.2？你可以通过使用Bootstrap 3.0（及以上版本）的新脚手架更轻松地解决问题。升级网站可能有点麻烦，但有自动转换工具，而且新系统要容易得多，可能会有所帮助。

其次，你应该了解另一个CSS技巧，即字重和行高。字重可以使文本变细/粗（等级为100、200、300、400等）。你可以使字体变细，行高降低，但整体字体变大，这样就可以“压缩”东西。如果你不知道，值得一试。

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

- Gu3miles

---

不，字重和行高的组合没有产生期望的效果。 - Ali Zaidi