Grid Bourbon/Neat:重置边距,让嵌套的div跨越整个宽度
我不熟悉波旁威士忌。我有一个关于嵌套的问题:我希望红色框填充整个宽度,它们之间没有沟槽。在它们上使用“@include omega”时,第一个框将删除其右边的边距,但右边的框仍保留边距,并且不调整其宽度 你能告诉我如何让它们跨越整个父框,而不留任何空白吗 下面是一个演示: 这是我的标记:Grid Bourbon/Neat:重置边距,让嵌套的div跨越整个宽度,grid,sass,css-frameworks,bourbon,neat,Grid,Sass,Css Frameworks,Bourbon,Neat,我不熟悉波旁威士忌。我有一个关于嵌套的问题:我希望红色框填充整个宽度,它们之间没有沟槽。在它们上使用“@include omega”时,第一个框将删除其右边的边距,但右边的框仍保留边距,并且不调整其宽度 你能告诉我如何让它们跨越整个父框,而不留任何空白吗 下面是一个演示: 这是我的标记: <div class="container"> <div class="box box-left"></div> <div class="box box-rig
<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;
}
}
}
有几种方法可以做到这一点
- 使用Neat的表格显示布局。例如:
@包括跨度列(第5列,共8列,表)代码>
- 使用Neat的底层
和柔性网格
功能。例如:柔性排水沟
width: flex-grid(5, 8) + flex-gutter(8); float: left;
@include span-columns(5 of 8, block-collapse)