bootstrap容器流体 - 删除边缘正确的方式（溢出） [英] bootstrap container-fluid - remove margins the right way (overflow)

问题描述

如何从boostrap container-fluid类和其行中删除所有边距？

.container-fluid {padding：0;}基本上是我想要的，它增加了20px溢出到身体..

所以我应该只是

body，html {overflow-x：隐; }

或

使用.container-fluid> .row

谢谢

解决方案

要具体说明您的问题：

.row 有一个负的左右边距，等于 col - * - *的左/右填充值，这就是为什么有水平滚动条，当你干扰网格而不了解它是如何工作的。如果操作左侧和右侧具有零填充的列类或其他值，则.row上的负边距必须等于列类左侧和右侧的填充。 .container还具有与列类的值匹配的填充，以防止滚动条。

所以答案是： .container-fluid> .row - 如果删除列类的左侧和右侧的填充，则在左侧和右侧使边距为0。如果所有都为零，那么你可以调整.container或者.container流体在左边和右边用零填充，但是如果你使用不同的值> 15px L& R，那么这是一个不同的故事，因为 .container / .container-fluid 将需要调整，如果左边和右边的填充大于15px。 p>

col - * - * 没有边距，当你使用box-sizing时，边界框全球作为Boostrap 3。

如果您想要一个紧紧的网格，请删除所有列类的左和向右在<$ c $的向左和向右上删除 负 c> .row ，然后可以删除 .container 上的左右边缘 padding 。

演示： http://jsbin.com/jeqase/2/

删除.container的紧密网格和全宽的所有填充和负边距以及任何周围的元素（body，html， c $ c> .alt-grid ：

  .alt-grid [class * =col - ] {padding-left：0; padding-right：0} 
 .alt-grid .row {margin-left：0; margin-right：0} 
 
 /调整后的* / 
 .alt-grid .container {width：100％; max-width：none; padding：0;} 
  

你也可以用 .container-fluid 来做到这一点 - 唯一要清零的是左右填充。

How can I remove all margins from boostrap container-fluid class and its rows?

.container-fluid { padding: 0;} does basically what I want but it adds 20px overflow to body..

So should I just

body, html { overflow-x: hidden; }

or

do something with .container-fluid > .row

Thank you

解决方案

To be specific about your question:

The .row has a negative left and right margin equal to the left/right padding value of the col-*-*, that is why there are horizontal scrollbars when you fiddle with the grid without understanding how it works. If you manipulate the column classes with zero padding on the left and right or with some other value, the negative margin on the .row must be equal to the the padding on the left and right of the column classes. The .container also has padding that matches the value of the column classes to prevent the scrollbars.

So the answer is: .container-fluid > .row -- make the margin:0 on the left and right if you remove the padding on the left and right of the column classes. If all is zero, then you can just adjust the .container or .container fluid with zero padding on the left and right, but if you use different values > 15px L & R, then it's a different story as the .container/.container-fluid will need to be adjusted if the left and right padding on the columns is greater than 15px.

There are no margins on the col-*-* it's padding which is quite different when you use box-sizing:border-box globally as Boostrap 3 does.

If you want a tight grid, remove all padding on the left and right of all column classes and then remove the negative margin on the left and right of the .row, and then you can remove the left and right padding on the .container.

DEMO: http://jsbin.com/jeqase/2/

Removes all padding and negative margin for a tight grid and full width of the .container with any surrounding element (body, html, whatever) with the class .alt-grid:

.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}

/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}

You can also do this with .container-fluid - the only thing to zero out is the left and right padding.

这篇关于bootstrap容器流体 - 删除边缘正确的方式（溢出）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！