css - Bootstrap - 在屏幕尺寸较小时删除填充或边距

Question

已编辑:也许我应该问一下，当屏幕宽度缩小到 480px 以下时，哪个选择器会设置侧边距？我一直在浏览 bootstrap-responsiveness.css 一段时间以找到它，但似乎没有任何影响。

原创我基本上想删除所有为较小设备屏幕的响应设置的默认填充或边距。

我在 container-fluid 选择器上覆盖了一个 background color，对于更大的屏幕，它们在整个宽度上完美地 100% 渲染，但它们的屏幕尺寸缩小到更小的尺寸，默认情况下，Bootstrap 似乎在container-fluid 或container 上添加边距或填充。

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

如果我使用自定义 css 来覆盖 Bootstrap 的默认样式，我应该覆盖什么媒体查询或选择器以在较小的屏幕上删除此填充？

Answer 1

专门针对“电话”的@media 查询是..

@media (max-width: 480px) { ... }

但是，对于任何较小的屏幕尺寸，您可能想要删除填充/边距。默认情况下，Bootstrap 在 978 像素处调整主体、容器和导航栏的边距/填充。

以下是一些对我有用(在大多数情况下)的查询:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

---

Bootstrap 4 更新

使用新的响应式 spacing utils，它可以让您为不同的屏幕宽度(断点)设置填充/边距: https://stackoverflow.com/a/43208888/171456