使用 Bourbon Neat 删除边距嵌套列
Remove margin nested columns with Bourbon Neat
如何删除两列内有嵌套偏移列的边距。我想确保列中的内容始终居中,但我似乎无法使用 @include row (table);
mixin 使其正常工作。
html
<section>
<div class="container">
<div class="col">
<div class="inner">
centered content
</div>
</div>
<div class="col">
<div class="inner">
centered content
</div>
</div>
</div>
</section>
SCSS
@import "bourbon";
@import "neat";
section{
@include outer-container(100%);
.container{
@include span-columns(12);
@include fill-parent;
.col{
@include span-columns(6);
border: 2px solid black;
.inner{
@include shift-in-context(1 of 6);
@include span-columns(8 of 12);
background: red;
}
}
}
}
你是说this差距?
CSS
.col{
@include span-columns(6);
border: 2px solid black;
margin-right: 0;
width: 50%;
Neat 内置了一个选项。这是 reset-display()
混音。将它从 table 重置为 .inner
class,我认为你的状态很好。
section {
@include outer-container(100%);
.container {
@include row(table);
@include fill-parent;
.col {
@include span-columns(6);
border: 2px solid black;
.inner {
@include reset-display;
@include shift-in-context(1 of 6);
@include span-columns(8 of 12);
background: red;
}
}
}
}
如何删除两列内有嵌套偏移列的边距。我想确保列中的内容始终居中,但我似乎无法使用 @include row (table);
mixin 使其正常工作。
html
<section>
<div class="container">
<div class="col">
<div class="inner">
centered content
</div>
</div>
<div class="col">
<div class="inner">
centered content
</div>
</div>
</div>
</section>
SCSS
@import "bourbon";
@import "neat";
section{
@include outer-container(100%);
.container{
@include span-columns(12);
@include fill-parent;
.col{
@include span-columns(6);
border: 2px solid black;
.inner{
@include shift-in-context(1 of 6);
@include span-columns(8 of 12);
background: red;
}
}
}
}
你是说this差距?
CSS
.col{
@include span-columns(6);
border: 2px solid black;
margin-right: 0;
width: 50%;
Neat 内置了一个选项。这是 reset-display()
混音。将它从 table 重置为 .inner
class,我认为你的状态很好。
section {
@include outer-container(100%);
.container {
@include row(table);
@include fill-parent;
.col {
@include span-columns(6);
border: 2px solid black;
.inner {
@include reset-display;
@include shift-in-context(1 of 6);
@include span-columns(8 of 12);
background: red;
}
}
}
}