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

问题描述

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

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

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

<div class="row-fluid">测试

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

解决方案

专门针对 'phones' 的 @media 查询是..

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

但是，您可能希望删除任何较小屏幕尺寸的填充/边距.默认情况下，Bootstrap 会在 978 像素处调整正文、容器和导航栏的边距/填充.

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

@media (max-width: 978px) {.容器 {填充:0;保证金:0;}身体 {填充:0;}.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {左边距:0；右边距:0;保证金底部:0;}}

演示

<小时>

Bootstrap 4 更新

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

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.

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.

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

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?

解决方案

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

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

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.

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

Demo

---

Update for Bootstrap 4

Use the new responsive spacing utils which let you set padding/margins for different screen widths (breakpoints): https://stackoverflow.com/a/43208888/171456

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