自举 - 删除填充或余量时屏幕尺寸较小(Bootstrap - Removing padding o

编辑：也许我应该问哪个选择画面时，下面480像素宽度减小到设置侧填充？ 我已浏览引导，responsiveness.css一会儿就找到这一点，但似乎没有影响到这一点。

原来我基本上要删除对较小的设备屏幕响应任何设置默认填充或保证金。

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

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

如果我使用自定义的CSS覆盖引导的默认风格，我应该覆盖哪些媒体查询或选择为在小屏幕上消除这种填充？

Answer 1:

专门针对“手机”的@media查询..

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

但是，你可能需要删除填充/保证金的任何较小的屏幕尺寸。 默认情况下，自举在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;
    }
}

演示

---

更新引导4

使用新的响应间距utils的它允许您为不同的屏幕宽度（断点）填充/利润率： https://stackoverflow.com/a/43208888/171456

Answer 2:

这里的问题是，因为比网格结构申请封闭行缘阴性当依靠这种除去填充容器填充要复杂得多。

除去在此情况下，容器的填充会导致造成所有行此容器类的内部的x轴溢出，这是关于引导网格最愚蠢的事情之一。

从逻辑上讲，应该通过接洽

1. 切勿使用.container类比中行的其他任何
2. 使的克隆.container类没有填充与非并网使用HTML
3. 为了去除.container移动填充可以手动媒体查询删除它，然后overflow-x: hidden; 这是不是很可靠，但在大多数情况下工作。

如果您正在使用LESS最终的结果会是这样的

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

更改媒体查询到要针对任何尺寸。

最后的想法，我会强烈建议使用Foundation Framework网格，它的方式更先进

Answer 3:

该线程是在寻找我的特定情况下的解决方案有帮助的（自举3）

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

Answer 4:

为了解决这样的问题，我使用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;}
}

Answer 5:

我得到一个元素去设备的100％宽度的方法是使用负的左，右页边距就可以了。 身体有24px的的填充，所以这是你可以使用什么样的负面利润率：

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

Answer 6:

我有过这样的问题发生在所用相似的格式和码的网站，我已经绞尽脑汁想在什么是缺失的细节做了一些我的网站的工作，和一些不。

自举3：对我来说，答案是没有改写CSS的.container流体，.row或重置的利润率，我意识到了一贯的模式是长字的长度为摆脱设计和创造利润 。

该解决方案的步骤：

1. 通过暂时删除包含容器和小的浏览器测试你的网站的部分测试您的网页。 这将确定您的问题的容器。

2. 你可能有一个div格式问题。 如果你这样做，解决它。 如果一切正常，则：

3. 确定如果您使用的是不是包皮过长的话。 如果你不能改变的话（像标签线路或标语等）

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

要么：

方案2：

@media (max-width: 767px){

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

Answer 7:

通过PauliusMarčiukaitis的CSS很好地工作了我的创世纪的主题，这里就是我如何进一步修改它为我的要求：

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

}

Answer 8:

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

Answer 9:

下面有什么，我为引导做3/4

使用容器流体代替容器。

这添加到我的CSS

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

这消除了以下1400px宽度屏幕边缘

Answer 10:

另一个CSS，可以使保证金的问题是，你有direction:someValue在你的CSS，所以只是通过将其设定初始删除它。

例如：

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

文章来源: Bootstrap - Removing padding or margin when screen size is smaller