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

编辑： 也许我应该问，当屏幕缩小到480px以下时，哪个选择器会设置边距？我已经浏览bootstrap-sensitiveness.css一段时间了，但是似乎没有任何影响。

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

我有一个background color覆盖在container-fluid选择器和用于更大的屏幕他们提供横跨宽度完全100％，但是他们在屏幕减小到更小的尺寸，在默认情况下，自举似乎添加余量或填充上container-fluid或container。

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

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

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

@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

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

在这种情况下，删除容器填充将导致X轴溢出，此X轴溢出是由该容器类内的所有行引起的，这是有关Bootstrap网格的最愚蠢的事情之一。

逻辑上应该通过

1. 永远不要将.container类用于行之外
2. 克隆.container没有填充可用于非网格html的类
3. 要删除.container移动设备上的填充，您可以通过媒体查询手动将其删除，overflow-x: hidden;这不是很可靠，但在大多数情况下都可以使用。

如果您使用的LESS是最终结果，则结果将如下所示

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

将媒体查询更改为您要定位的任何大小。

最后的想法，我强烈建议您使用Foundation FrameworkGrid作为更高级的方法

此线程有助于在我的特殊情况下找到解决方案（引导3）

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

为了解决这样的问题，我使用CSS-我认为是最快，最简单的方法...只需根据您的需要进行修改...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

我让元素达到设备宽度100％的方式是在其上使用负的左右边距。主体的填充为24像素，因此您可以对以下内容使用负边距：

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

在Bootstrap 4中，初始容器具有15px的边距，向下层叠到所有行和列。所以，这样的事情对我有用...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

我曾在使用相似格式和代码的网站上发生过此问题，而我却全神贯注于使某些网站正常工作的缺失细节。

对于Bootstrap 3：对我来说，答案不是用重写CSS来实现.container-fluid，.row或重置页边距，我意识到的一贯模式是较长的字词不符合设计和边距。

解决步骤：

1. 通过临时删除包含容器的部分来测试页面，并在小型浏览器上测试您的网站。这将确定您的问题容器。

2. 您可能有div格式问题。如果这样做，请修复它。如果一切顺利，则：

3. 确定您是否使用了没有包装的长字。如果您不能更改单词（例如标语或标语等）

解决方案1：在较小的屏幕媒体查询中将字体格式化为较小的尺寸（我通常发现@media（最大宽度：767px）就足够了）。

要么：

解决方案2：

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

PauliusMarčiukaitis的CSS很好地适用于我的创世纪主题，这是我如何根据自己的需求对其进行进一步修改的方式：

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

这是我为Bootstrap 3/4所做的工作

使用容器流体而不是容器。

将此添加到我的CSS

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

这会删除低于1400px宽度的屏幕边距

另一个可能引起边距问题direction:someValue的CSS是您的CSS中存在的，因此只需将其设置为Initial即可将其删除。

例如：

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}

一种简单的解决方案是编写类似的内容，

像素lg-1

mb-lg-5

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