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

Question

编辑：

也许我应该问一下，当屏幕宽度减小到480px以下时，哪个选择器设置了侧边填充？我浏览bootstrap-responsiveness.css已经有一段时间了，但似乎没有什么影响。

原创

我基本上想删除任何默认的填充或边距设置，以便在较小的设备屏幕上的响应性。

我有一个

覆盖于

选择器和较大的屏幕，他们渲染完美的100%的宽度，但他们的屏幕缩小到较小的尺寸，默认情况下，Bootstrap似乎增加了页边距或填充

或者

..。

test

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

Answer 1

@media查询专用于‘phone’是..

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

但是，对于任何较小的屏幕尺寸，您可能需要删除填充/边距。默认情况下，Bootstrap以978px调整正文、容器和导航栏的页边距/填充。

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

@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;
    }
}

演示

Bootstrap 4更新

使用新的响应式

间隔工具

允许您为不同的屏幕宽度(断点)设置填充/边距：

https://stackoverflow.com/a/43208888/171456

Answer 2

这里的问题比删除容器填充复杂得多，因为网格结构在对封闭行应用负边距时依赖于该填充。

在这种情况下，删除容器填充将导致此容器类中的所有行导致x轴溢出，这是Bootstrap Grid最愚蠢的事情之一。

从逻辑上讲，它应该由

从不使用

为除行以外的任何内容初始化

克隆

类的新实例，该类没有用于非网格html的填充。

用于删除

在移动设备上填充您可以通过媒体查询手动删除它，然后

这不是非常可靠，但在大多数情况下都是有效的。

如果您正在使用

最终结果将如下所示

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

将媒体查询更改为您想要的目标大小。

最后，我强烈建议您使用

网格作为其更先进的方式

Answer 3

简单的解决方案是写一些类似这样的东西，

px-lg-1

mb-lg-5

通过添加lg，该类将仅应用于大屏幕