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

问题描述

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.

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

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