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

编辑： 也许我应该问一下，当屏幕宽度降低到480px以下时，哪个选择器设置侧边距？我已经浏览bootstrap-responsibility.css一段时间来定位这个，但似乎没有什么影响

原创 我基本上希望删除较小设备屏幕上响应的任何默认填充或边距设置

我有一个

背景色

覆盖在

容器流体

选择器上，对于较大的屏幕，它们在整个宽度上完美地呈现100%，但它们会将屏幕缩小到较小的尺寸， 默认情况下，引导似乎在

容器流体

或

容器

上添加边距或填充

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

测试

---

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

要解决类似问题，我使用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;}
}

---

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

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

但是，对于任何较小的屏幕尺寸，您可能需要删除填充/边距。默认情况下，引导以978px调整正文、容器和导航栏的边距/填充

以下是一些（在大多数情况下）对我有效的查询：

---

引导程序4的更新

使用新的responsive按钮，可以为不同的屏幕宽度（断点）设置填充/边距：

---

我让元素达到设备100%宽度的方法是在元素上使用负左右边距。主体具有24px的填充，因此可以使用负边距：

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

---

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

---

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

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

从逻辑上讲，应该由

切勿将

.container

类用于行以外的任何对象

克隆

.container

类，该类没有用于非网格html的填充

要删除移动设备上的

.container

填充，您可以通过媒体查询手动删除它，然后

overflow-x:hidden这不是很可靠，但在大多数情况下都有效

如果使用

LESS

，最终结果如下

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

将媒体查询更改为您想要的目标大小

---

最后，我强烈建议使用网格作为更高级的方式

我曾经在使用类似格式和代码的网站上遇到过这个问题，我绞尽脑汁想了想是什么遗漏了一些细节，使我的一些网站能够正常工作，而另一些则无法正常工作

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

对于Bootstrap 3：我的答案不是重写.container fluid、.row的css或重置边距，我意识到一致的模式是较长单词的长度偏离了设计并创建了边距

解决方案包括以下步骤：

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

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

确定您是否使用了没有包装的长单词。如果无法更改单词（如标记行或标语等）

解决方案1：将媒体查询中的字体格式化为较小的大小，以获得较小的屏幕（我通常认为@media（最大宽度：767px）就足够了）

或：

解决方案2：

@media (max-width: 767px){

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

---

Paulius Marčiukaitis的CSS非常适合我的创世纪主题，下面是我如何根据我的需求进一步修改它的：

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

---

}以下是我为Bootstrap 3/4所做的

使用容器液体代替容器

将此添加到我的CSS

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

---

这将删除1400px屏幕宽度以下的边距

另一个可能导致边距问题的css是，css中有

方向：someValue

，因此只需将其设置为initial即可删除边距

例如：

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

---

在bootstrap4中，初始容器的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;
    }
}

---

简单的解决办法是写这样的东西

px-lg-1

mb-lg-5

---

通过添加lg，该类将仅应用于Bootstrp 5 use的大屏幕上。g-0.g-md-1这将为小于576px的屏幕设置水槽零

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

。。。

抱歉..简单地添加一个选择器并不能覆盖这个问题的填充…@tassoevan恐怕我已经知道000px是否与0相同，将000px更改为0并不能解决问题，另外，我不知道将宽度设置为像素值甚至设置为0是否是个好主意..我想这与边距或填充有关。“000”这只是一个例子。你应该写#你的#id{margin:5px；padding:0px；}而不是#你的#id{width:000px；height:000px；}试着总是写正确的代码！初学者可能会感到困惑！：）对最终找到了设置此行为的原因。你发现了我的问题。非常感谢。这是非常有用的，为引导工作。。谢谢，打开的导航栏的最大宽度是多少？可能我也有类似的问题，但与body和实际的.container类之间的填充有关。这个容器对于Iphone 5的屏幕来说真的很小，间距UTIL对我一点帮助都没有，相反，我直接编辑机身样式，将填充从50px更改为15px，现在我们在屏幕上有了更多的空间。实际上，填充是添加到机身上的。从Rev

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

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