CSS Bootstrap - 当屏幕尺寸较小时删除填充或边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16410659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Removing padding or margin when screen size is smaller
提问by Seong Lee
EDITED:Maybe I should ask which selector sets up the side padding when the screen is reduced to below 480px width? I have been browsing bootstrap-responsiveness.css for a while to locate this but nothing seems to affect this.
编辑：也许我应该问当屏幕宽度减小到 480 像素以下时哪个选择器设置侧边距？我一直在浏览 bootstrap-responsiveness.css 一段时间来找到它，但似乎没有任何影响。
OriginalI basically want to remove any default padding or margin set for responsiveness on smaller device screens.
原始我基本上想删除任何默认填充或边距设置以在较小的设备屏幕上响应。
I have a background coloroverridden on container-fluidselector and for larger screen they render perfectly 100% across the width but they the screen is reduced to smaller sizes,
by default, Bootstrap seems to add a margin or padding oncontainer-fluidor container.
我有一个background color覆盖在container-fluid选择器和用于更大的屏幕他们提供横跨宽度完全100％，但是他们在屏幕减小到更小的尺寸，在默认情况下，自举似乎添加余量或填充上container-fluid或container。
<div class="container-fluid">
<div class="row-fluid">
test
</div>
</div>
If I use custom css to overwriting Bootstrap's default style, what media query or selector should I overwrite to for removing this padding on smaller screens?
如果我使用自定义 css 覆盖 Bootstrap 的默认样式，我应该覆盖哪个媒体查询或选择器以在较小的屏幕上删除此填充？
回答by Zim
The @media query specifically for 'phones' is..
专门针对“手机”的@media 查询是..
@media (max-width: 480px) { ... }
But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.
但是，您可能希望删除任何较小屏幕尺寸的填充/边距。默认情况下，Bootstrap 调整主体、容器和导航栏的边距/填充为 978 像素。
Here are some queries that have worked (in most cases) for me:
以下是一些对我有用（在大多数情况下）的查询：
@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;
}
}
Update for Bootstrap 4
Bootstrap 4 的更新
Use the new responsive spacing utilswhich let you set padding/margins for different screen widths (breakpoints): https://stackoverflow.com/a/43208888/171456
使用新的响应式间距实用程序，它可以让您为不同的屏幕宽度（断点）设置填充/边距：https: //stackoverflow.com/a/43208888/171456
回答by Zyad Sherif
The problem here is much more complex than removing the container padding since the grid structure relies on this padding when applying negative margins for the enclosed rows.
这里的问题比删除容器填充复杂得多，因为网格结构在为封闭行应用负边距时依赖于这种填充。
Removing the container padding in this case will cause an x-axis overflow caused by all the rows inside of this container class, this is one of the most stupid things about the Bootstrap Grid.
在这种情况下删除容器填充将导致由该容器类内部的所有行引起的 x 轴溢出，这是 Bootstrap Grid 最愚蠢的事情之一。
Logically it should be approached by
从逻辑上讲，它应该通过
- Never using the
.containerclass for anything other than rows - Make a clone of the
.containerclass that has no padding for use with non-grid html - For removing the
.containerpadding on mobile you can manually remove it with media queries thenoverflow-x: hidden;which is not very reliable but works in most cases.
- 永远不要将该
.container类用于除行以外的任何内容 - 制作一个
.container没有填充的类的克隆，用于非网格 html - 要删除
.container移动设备上的填充，您可以使用媒体查询手动删除它，overflow-x: hidden;这不是很可靠，但在大多数情况下都有效。
If you are using LESSthe end result will look like this
如果您正在使用LESS最终结果将如下所示
@media (max-width: @screen-md-max) {
.container{
padding: 0;
overflow-x: hidden;
}
}
Change the media query to whatever size you want to target.
将媒体查询更改为您想要定位的任何大小。
Final thoughts, I would highly recommend using the Foundation FrameworkGrid as its way more advanced
最后的想法，我强烈建议使用Foundation FrameworkGrid 作为更高级的方式
回答by Mike Dorsey
This thread was helpful in finding the solution in my particular case (bootstrap 3)
该线程有助于在我的特定情况下找到解决方案（引导程序 3）
@media (max-width: 767px) {
.container-fluid, .row {
padding:0px;
}
.navbar-header {
margin:0px;
}
}
回答by Paulius Mar?iukaitis
To solve problems like this I'm using CSS - fastest & simplest way I think... Just modify it by your needs...
为了解决这样的问题，我正在使用 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;}
}
回答by Dan Gayle
The way I get an element to go 100% width of the device is use negative left and right margins on it. The body has a padding of 24px, so that's what you can use negative margins for:
我让一个元素达到设备宽度的 100% 的方法是在它上面使用负的左右边距。正文的内边距为 24 像素，因此您可以将负边距用于：
element{
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
}
回答by MastaBaba
In Bootstrap 4, the 15px margin the initial container has, cascades down to all rows and columns. So, something like this works for me...
在 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;
}
}
回答by Kim McCann
I have had this problem occur on sites that used similar formatting and code and I have racked my brain over what was the missing detail that made some of my sites work, and some not.
我在使用类似格式和代码的网站上遇到过这个问题，我绞尽脑汁想知道是什么让我的一些网站正常工作，而有些则没有。
For Bootstrap 3: The answer for me was not in rewriting css for .container-fluid, .row or resetting margins, the consistent pattern that I realized was the length of longer words were throwing off the design and creating margins.
对于 Bootstrap 3：我的答案不是为 .container-fluid、.row 或重置边距重写 css，我意识到的一致模式是较长的单词的长度正在抛弃设计并创建边距。
The solution steps:
解决步骤：
Test your page by temporarily deleting sections that contain containers and test your site on small browsers. This will identify your problem container.
You may have a div formatting problem. If you do, fix it. If all is well then:
Identify if you have used long words that are not wrapping. If you cannot change the word (like for tag lines or slogans, etc.)
通过临时删除包含容器的部分来测试您的页面，并在小型浏览器上测试您的网站。这将识别您的问题容器。
您可能有 div 格式问题。如果你这样做，修复它。如果一切顺利，那么：
确定您是否使用了不换行的长词。如果你不能改变这个词（比如标语或口号等）
Solution 1: Format the font to smaller size in your media query for smaller screen (I usually find @media (max-width: 767px) to be sufficient).
解决方案 1：在您的媒体查询中将字体格式设置为更小的屏幕尺寸（我通常发现 @media (max-width: 767px) 就足够了）。
OR:
或者：
Solution 2:
解决方案2：
@media (max-width: 767px){
h1, h2, h3 {word-wrap: break-word;}
}
回答by Swagatam Majumdar
The CSS by Paulius Mar?iukaitis worked nicely for my Genesis theme, here's what how I further modified it for my requirement:
Paulius Mar?iukaitis 的 CSS 非常适合我的 Genesis 主题，以下是我如何根据我的要求进一步修改它：
@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;
}
}
回答by Ryan NZ
Heres what I do for Bootstrap 3/4
这是我为 Bootstrap 3/4 所做的
Use container-fluid instead of container.
使用容器流体而不是容器。
Add this to my CSS
将此添加到我的 CSS
@media (min-width: 1400px) {
.container-fluid{
max-width: 1400px;
}
}
This removes margins below 1400px width screen
这将删除低于 1400px 宽度屏幕的边距
回答by Richard Socker
Another css that can make the margin problem is that you have direction:someValuein your css, so just remove it by setting it to initial.
另一个可能导致边距问题direction:someValue的 css是您的 css 中存在的，因此只需将其设置为 initial 即可将其删除。
For example:
例如：
body {
direction:rtl;
}
@media (max-width: 480px) {
body {
direction:initial;
}
}
