103

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

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

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

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

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

4

13 回答 13

128

专门针对“电话”的@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

于 2013-05-07T11:39:49.913 回答
21

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

在这种情况下删除容器填充将导致该容器类内部的所有行导致 x 轴溢出，这是 Bootstrap Grid 最愚蠢的事情之一。

从逻辑上讲，它应该由

  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网格作为更高级的方式

于 2015-05-06T09:09:38.710 回答
10

简单的解决方案是写这样的东西，

像素-lg-1

mb-lg-5

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

于 2020-09-16T11:06:03.783 回答
8

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

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}
于 2014-07-18T18:44:02.317 回答
7

为了解决这样的问题，我正在使用 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;}
}
于 2013-05-07T03:26:28.177 回答
3

我让一个元素达到设备 100% 宽度的方法是在其上使用负的左右边距。body 有 24px 的 padding，所以你可以使用负边距：

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}
于 2013-08-29T20:16:45.803 回答
2

在 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;
    }
}
于 2019-09-04T14:35:58.967 回答
2

对于 Bootstrp 5 使用 .g-0 .g-md-1 这会将小于 576px 的屏幕尺寸设置为零

<div class="container g-0 g-md-1"> ... </div>
于 2021-03-01T04:22:02.270 回答
1

我在使用类似格式和代码的网站上遇到过这个问题，我绞尽脑汁想知道是什么缺失的细节让我的一些网站正常工作，而有些则没有。

对于 Bootstrap 3：对我来说，答案不是为 .container-fluid、.row 重写 css 或重置边距，我意识到的一致模式是较长单词的长度会影响设计并产生边距。

解决步骤：

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

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

  3. 确定您是否使用了不换行的长词。如果您无法更改单词（例如标语或标语等）

解决方案 1：在您的媒体查询中将字体格式设置为更小的尺寸以获取更小的屏幕（我通常发现 @media (max-width: 767px) 就足够了）。

或者：

解决方案2：

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}
于 2017-08-04T16:44:27.833 回答
1

Paulius Marčiukaitis 的 CSS 非常适合我的 Genesis 主题，以下是我如何进一步修改它以满足我的要求：

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

}

于 2017-09-07T03:59:29.257 回答
0 
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}
于 2017-07-21T05:04:01.123 回答
0

这是我为 Bootstrap 3/4 所做的

使用容器流体代替容器。

将此添加到我的 CSS

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

这将删除低于 1400 像素宽度屏幕的边距

于 2019-01-14T07:51:34.197 回答
0

另一个可能导致边距问题的 css 是direction:someValue您的 css 中存在，因此只需将其设置为初始值即可将其删除。

例如：

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}
于 2019-02-07T18:26:09.953 回答