Bootstrap 3。容器中的stream体添加不需要的填充
我想我的内容是stream动的，但是当使用Bootstrap的网格使用.container-fluid时，我仍然看到填充。 我怎样才能摆脱填充？
我发现我没有使用.row填充，但我想添加列，并且只要我这样做，填充就回来了：O。
我希望能够使用全宽的列。
一个例子：
<div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div>
解决scheme我有：
覆盖bootstrap.css，linke 1427＆1428（v3.2.0）
padding-right：15px; padding-left：15px;
至
padding-right：0px; padding-left：0px;
你也应该为每个容器添加一个“行”来解决这个问题！
<div class="container-fluid"> <div class="row"> Some text </div> </div>
请从Bootstrap中find实际的css
.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { margin-right: -15px; margin-left: -15px; }
当你添加一个.container-fluid类时，它会添加一个15px的水平填充，当通过在行上设置的负边距将一个.row类添加为一个子元素时，这个类将被移除。
我认为我和Tim的要求是一样的，但是没有一个答案提供了一个具有正常内部排水沟的“视angular边缘到边缘”的解决scheme。 或者用另外一种方法说明：如何让我的第一列和最后一列打破容器填充并stream到视口的边缘，同时仍保持列之间的正常排水沟。
从我所能告诉的是，没有一个整洁的解决scheme。 这对我来说是有效的，但它远远超出了Bootstrap所支持的范围。 但它现在工作（Bootstrap 3.3.5＆4.0-alpha）。
http://www.bootply.com/ioWBaljBAd
示例HTML：
<div class="container"> <div class="row full-width-row"> <div> <div class="col-sm-4 col-md-3">…</div> <div class="col-sm-4 col-md-3">…</div> <div class="col-sm-4 col-md-3">…</div> <div class="col-sm-4 col-md-3">…</div> </div> </div> </div>
CSS：
.full-width-row { overflow-x: hidden; } .full-width-row > div { margin-left: -15px; margin-right: -15px; }
诀窍是在行和列之间嵌套一个div ，以生成额外的-15px的边距，以推入容器填充。 额外的负边界在小视口上创build水平滚动（到空白）。 向.row添加overflow-x: hidden是为了抑制它。
这对.container-fluid和.container是.container 。
如果您正在使用configuration器，则可以将@grid-gutter-width从30px为0
你只需要在Bootstrap的.container类中使用这些CSS属性，并且你可以把普通的网格系统放在他的内部，而没有任何容器的内容将被排除在外（在视口中没有scroll-x）。
HTML：
<div class="container"> <div class="row"> <div class="col-xs-12"> Your content here! ... </div> </div> ... more rows </div>
CSS：
/* Bootstrap custom */ .container{ padding-left: 0rem; padding-right: 0rem; overflow: hidden; }
在新的aplha版本中，他们引入了实用程序间隔类 。 如果你巧妙地使用它们，结构可以被调整。
间隔实用程序类
<div class="container-fluid"> <div class="row"> <div class="col-sm-4 col-md-3 pl-0">…</div> <div class="col-sm-4 col-md-3">…</div> <div class="col-sm-4 col-md-3">…</div> <div class="col-sm-4 col-md-3 pr-0">…</div> </div> </div>
pl-0和pr-0将删除列中的前导和后缀填充。 留下的一个问题是列的embedded行，因为它们仍然具有负边界。 在这种情况下：
<div class="col-sm-12 col-md-6 pl-0"> <div class="row ml-0"> </div>
版本差异
另请注意，实用程序间隔类自版本4.0.0-alpha.4以来已更改。 在用2个破折号隔开之前，例如=> px-0和pl-0等等。
为了保持第三版的主题：这就是我在Bootstrap 3项目上使用的内容，并将这个特定的间隔工具的指南针设置包括到bootstrap-sass （版本3）或bootstrap （版本4.0.0-alpha.3）双破折号或bootstrap （版本4.0.0-alpha.4及以上）与单破折号。
而且，最新的版本上涨到5倍（例如： pt-5 padding-top 5），而不是只有3倍。
罗盘
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default; @import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix @import "../scss/utilities/_spacing.scss";
CSS输出
你只能从生成的css文件复制/粘贴填充间距类。
.p-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1 { padding-top: 0.25rem !important; } .pr-1 { padding-right: 0.25rem !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pl-1 { padding-left: 0.25rem !important; } .px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pl-2 { padding-left: 0.5rem !important; } .px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .p-3 { padding: 1rem !important; } .pt-3 { padding-top: 1rem !important; } .pr-3 { padding-right: 1rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pl-3 { padding-left: 1rem !important; } .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-4 { padding: 1.5rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pr-4 { padding-right: 1.5rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pl-4 { padding-left: 1.5rem !important; } .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .p-5 { padding: 3rem !important; } .pt-5 { padding-top: 3rem !important; } .pr-5 { padding-right: 3rem !important; } .pb-5 { padding-bottom: 3rem !important; } .pl-5 { padding-left: 3rem !important; } .px-5 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
