我是波旁/整洁的新手。我有一个关于嵌套的问题：我希望红色框填充整个宽度，而彼此之间不要有排水沟。当在其上使用“ @include omega”时，第一个框将删除其右边距，但右边的框仍具有边距，并且不会调整其宽度。
您能告诉我如何使它们跨越整个父级框，而在它们之间没有任何边距吗？
这是一个演示：http : //wuergeengel.net.dd13736.kasserver.com/
这是我的标记：
<div class="container">
<div class="box box-left"></div>
<div class="box box-right">
<div class="box-red-left nested"></div>
<div class="box-red-right nested"></div>
</div>
</div>
这是我的风格：
.container
{
@include outer-container;
}
.box
{
border: 1px solid black;
height: 500px;
}
.box-left
{
@extend .box;
@include span-columns(4);
}
.box-right
{
@extend .box;
@include span-columns(8);
.nested
{
border: 1px solid red;
height: 400px;
&.box-red-left
{
@extend .nested;
@include span-columns(3 of 8);
@include omega;
}
&.box-red-right
{
@extend .nested;
@include span-columns(5 of 8);
@include omega;
}
}
}
您可以通过几种方法来执行此操作。
@include span-columns(5 of 8, table);使用Neat的基础flex-grid和flex-gutter功能。例如：
width: flex-grid(5, 8) + flex-gutter(8);
float: left;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句