Bootstrap – 当屏幕尺寸较小时删除填充或边距
编辑：也许我应该问哪个select器设置边填充当屏幕减less到480px宽度以下？ 我一直在浏览bootstrap-responsiveness.css一段时间来find这个，但似乎没有任何影响。
原来，我基本上想要删除任何默认的填充或边界设置为更小的设备屏幕上的响应。
我在container-fluidselect器上覆盖了一个background color ，对于较大的屏幕，它们在整个宽度上完全呈现100％，但是屏幕缩小为较小的尺寸，默认情况下，Bootstrap似乎在container-fluid或container上添加了边距或填充。
如果我使用自定义css来覆盖Bootstrap的默认样式，我应该覆盖什么媒体查询或select器来删除在较小的屏幕上的填充？
特别针对“手机”的@media查询是..
@media (max-width: 480px) { ... }
但是，您可能希望删除任何较小屏幕尺寸的填充/边距。 默认情况下，Bootstrap将margin / padding调整为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轴溢出，这是Bootstrap网格最愚蠢的事情之一。
从逻辑上讲，应该通过
- 除了行以外，不要使用
.container类 - 制作无填充的
.container类的一个克隆，用于非网格html - 要移除移动设备上的
.container填充，您可以使用媒体查询手动删除它，然后overflow-x: hidden;这是不是很可靠，但在大多数情况下工作。
如果您使用LESS ，最终结果将如下所示
@media (max-width: @screen-md-max) { .container{ padding: 0; overflow-x: hidden; } }
将媒体查询更改为您想要定位的大小。
最后的想法，我强烈推荐使用Foundation Framework网格作为更先进的方式
这个线程有助于在我的特定情况下find解决scheme（bootstrap 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％宽度的设备的方式是使用负的左右边距。 正文有一个24px的填充，所以这就是你可以使用负边距的：
element{ margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
我曾经在使用类似格式和代码的网站上发生过这个问题，而且我已经绞尽脑汁地想知道是什么让我的一些网站工作，而有些没有。
对于Bootstrap 3：对于我来说，答案并不是重写css for .container-fluid，.row或者重新设置页边距，我意识到的一致的模式是更长的单词的长度正在抛弃devise和创造利润率 。
解决scheme步骤：
-
通过临时删除包含容器的部分来testing您的页面，并在小型浏览器上testing您的网站。 这将识别您的问题容器。
-
你可能有一个格式问题。 如果你这样做，修复它。 如果一切顺利，那么：
-
确定您是否使用了不包装的长词。 如果你不能改变这个词（如标签行或标语等）
解决scheme1：在您的媒体查询较小的屏幕（我通常发现@media（max-width：767px）就足够）格式化字体到较小的大小。
要么：
解决scheme2：
@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; }
