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

Question

编辑: 当屏幕缩小到480px宽度以下时,我可能会问哪个选择器设置了侧边填充？我一直在浏览bootstrap-responsiveness.css一段时间来找到它,但似乎没有任何影响这一点.

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

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

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

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

Answer 1

专门针对'手机'的@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

Answer 2

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

px-lg-1

mb-lg-5

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

Answer 3

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

在这种情况下删除容器填充将导致由此容器类内的所有行引起的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 FrameworkGrid作为更先进的方式

Answer 4

这个帖子有助于在我的特定情况下找到解决方案(bootstrap 3)

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

Answer 5

为了解决这样的问题,我正在使用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 6

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

<div class="container g-0 g-md-1"> ... </div>