Bootstrap - 当屏幕尺寸较小时删除填充或边距 [英] Bootstrap - Removing padding or margin when screen size is smaller

问题描述

EDITED：
也许我应该问，当屏幕缩小到480像素宽度以下时，哪个选择器设置了侧边填充？我一直浏览bootstrap-responsiveness.css一段时间找到这个，但似乎没有什么影响这一点。

EDITED: Maybe I should ask which selector sets up the side padding when the screen is reduced to below 480px width? I have been browsing bootstrap-responsiveness.css for a while to locate this but nothing seems to affect this.

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

Original I basically want to remove any default padding or margin set for responsiveness on smaller device screens.

我有一个背景颜色覆盖在 container-fluid 选择器，屏幕，他们完全100％跨越宽度，但他们的屏幕减少到更小的尺寸，
默认情况下，Bootstrap似乎添加一个边距或填充 container-fluid 或 container 。

I have a background color overridden on container-fluid selector and for larger screen they render perfectly 100% across the width but they the screen is reduced to smaller sizes, by default, Bootstrap seems to add a margin or padding oncontainer-fluid or container.

如果我使用自定义css覆盖Bootstrap的默认样式，

If I use custom css to overwriting Bootstrap's default style, what media query or selector should I overwrite to for removing this padding on smaller screens?

推荐答案

专为手机的@media查询是..

The @media query specifically for 'phones' is..

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

但是，您可能想要删除任何较小屏幕尺寸的填充/边距。默认情况下，Bootstrap会将body，container和navbars的margin / padding调整为978px。

But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.

以下是一些对我有用的查询： p>

Here are some queries that have worked (in most cases) for me:

@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 - 当屏幕尺寸较小时删除填充或边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！