使用 Bourbon Neat 删除跨度列上的边距

Posted 2023-03-06

【中文标题】使用 Bourbon Neat 删除跨度列上的边距

【英文标题】：Remove margin on span columns with Bourbon Neat

【发布时间】：2014-09-14 22:50:13

【问题描述】：

我开始将 Thoughtbot 的 Bourbon Neat 用于响应式网格。总的来说，它很漂亮，我真的很喜欢它，但我被一个小问题挂断了。

我试图让两列在没有边距的情况下彼此相邻，但在尝试复制他们的示例后，我没有得到相同的结果。

这是示例 html：

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

这是我的 SCSS：

section 
@include outer-container;
text-align: center;


.container 
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));

.col2 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 

产生这个：

但是当我尝试使用表格方法让两列相互嵌套/对接时，如他们的示例所示，我得到了：

SCSS：

section 
@include outer-container;
text-align: center;


.container 
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));

.col2 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 

输出：

如果我走@include omega(); 可行的路线，但它不会扩大最后一列的整个宽度：

SCSS：

section 
@include outer-container;
text-align: center;


.container 
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));

.col2 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 

输出：

基本上，我可以省略容器部分中的内容，这些内容会产生我正在寻找的结果。但是有必要创建一个空的div 来实现吗？：

SCSS

section 
@include outer-container;
text-align: center;


.container 
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));

.col2 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 

HTML（.container 中的内容已被注释掉）：

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

输出：

无论如何，我不知道实现这一目标的“正确”方式是什么。该文档并没有真正具体解释如何让两列相互嵌套。从我试图在他们的示例中复制的内容来看，并没有产生相同的结果。

除非我需要在最后一列专门添加margin:0;。

【参考方案1】：

您可以执行 @include span-columns(6 of 12,block-collapse) 之类的操作

【讨论】：

那行不通。最后一项的覆盖宽度与其他项的宽度不匹配。并且一行的所有项目的总宽度超过 100%。

【参考方案2】：

您不是只是将您的p 与内容“这是容器”错误地放置在一起，因此它不小心被用作表格单元格，但您实际上希望它位于容器上方？

把它放在.container 上面就可以了：

<section>
  <p>
    This is the main section.
  </p>
  <p>
    This is the container
  </p>
  <div class="container">
    <div class="col1">
      <p>
        This is the 1st column.
      </p>
    </div>

    <div class="col2">
      <p>
        This is the 2nd column.
      </p>
    </div>

  </div>
</section>

文字：

section 
  @include outer-container;
  text-align: center;


.container 
  @include fill-parent;
  @include row(table);

  .col1 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  
  .col2 
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  

输出：

【参考方案3】：

您可以将每个容器的 span-columns() 设置为每个网格的一半以下，然后将您从每个容器中获取的剩余值移动并 shift() 每个容器远离左/右侧，如下所示：

html:

<div id="wrapper">
    <div id="1"></div>
    <div id="2"></div>
</div>

sass/sccs:

#wrapper

    #1
    
        @include span-columns(5);
        @shift(1);
    
    #2
    
        @span-columns(5);
        @shift(-1);
    

或者可以使用direction-context mixin来切换#2的方向...

sass/sccs:

#wrapper

    #1
    
        @include include span-columns(5);
        @include shift(1);
    

        @include direction-context(right-to-left)
        
            #2
            
                @include span-columns(5);
                @include shift(-1);
            
        

我不确定我是否 100% 关注你的问题，但如果你的意思是你不能让左 div 的 RIGHT 侧直接在中间接触右 div 的 LEFT 侧，那么我相信这两种解决方案会如果你和他们一起玩一会儿就工作..

让我知道它是如何工作的~gl！

【讨论】：

那么这个答案是否解决了问题中描述的问题？从您的回答看来，您似乎没有理解所提出的问题。