如何改变响应CSS网格的天沟宽度 [英] How to change gutter widths on Responsable CSS Grid

问题描述

我使用ResponsessCSS（.com）网格为LESS。

这一切都很好，唯一的问题是，我不能修改水槽宽度，以便如果我有以下： -

两个div并排分成2列使用： -

  header {
 div {
 .column（6）; 
} 
} 
  

整个网格是12除以6 = 2

但是我想显示div并排，第一个元素左边没有槽，第二个元素右边没有gutter。

这将使我有两个并排的元素，在中间有一个天沟，而不是我现在的： -

http://s13.postimg.org/xnh8sy40n/Untitled_2.png p>

讨论我的完整LESS文件，任何帮助将不胜感激，我不认为Responsable允许这种开箱： -

/ **
*负责任的网格系统
* /

  / * == ================================================== ====== * / 
 / * =网站变数= * / 
 / * ======================== ============================== * / 
 
 / *网格选项* / 
 @gutter_width：18px; //你的天沟宽度
 @columns：12; //你想要的列数量
 @max_width：960px; //设置网站的最大宽度
 
 //边框，边距，填充等的边长
 @gutter：@ gutter_width * 0.5; 
 
 / ** 
 *基准
 * 
 *常用设置：
 * 
 * 16％字体和24px基线时为100％ 。 
 * 
 *对于12px字体和18px基线，为75％。 
 * 
 * / 
 @baseline：100％; 
 
 / *字体变量* / 
 @body_color：＃333; 
 @heading_color：＃111; 
 
 @body_family：Open Sans，Helvetica Neue，Arial，Helvetica，Sans-Serif; 
 @heading_family：Open Sans Condensed，Helvetica Neue，Arial，Helvetica，Sans-Serif; 
 
 / *链接颜色* / 
 @link：＃6bac60; 
 @link_hover：＃78aace; 
 
 / *选择颜色* / 
 @select：＃78aace; 
 @select_color：#fff; 
 
 / *默认颜色* / 
 @grey_light：#ddd; 
 @grey_regular：#ccc; 
 @grey_dark：＃666; 
 
 @green：＃6bac60; 
 
 / * ====================================== ================== * / 
 / * =导入规范化基线和网格= * / 
 / * ========= ============================================= * / 
 
 @importnormalize.less; 
 @importbaseline.less; 
 @importgrid.less; 
 
 / * ====================================== ================== * / 
 / * =您的自定义样式到这里= * / 
 / * ========= ============================================= * / 
 
 .wrapper {
 max-width：960px; 
 margin：0 auto; 
} 
 
 header {
 .clearfix（）; 
 .column（12,0）; 
 div {
 .column（6）; 
} 
} 
 
 @media屏幕和（max-width：520px）{
 
} 
  >          Grid.less文件中的Responsable-Framework，你会发现每一列都有一个padding在一半大小的gutter-width。
 
 
 
注意，grid使用 box-sizing：border-box 另请参见为什么Bootstrap 3切换到box-sizing：border-box？ 
 
 
 
利用 .column  mixin您可以将第二个参数设置为 0 以删除填充（gutter）：
  header {
 div {
 .column（6,0）; 
} 
} 
  
只能在网格的边框上删除gutter你可以使用下面的代码：
  header {
 div {
 .column（6）; 
&：first-child {
 padding-left：0; 
} 
&：last-child {
 padding-right：0; 
} 
} 
} 
  
 
I am using the ResponsableCSS (.com) grid for LESS.

It all works great, the only problem I have is that I can't amend the gutter widths so that if I have the following: -

Two divs side by side split into 2 columns using: -
            header {
                div {
                    .column(6);
                }
            }
The overall grid is 12 divided by 6 = 2

But I want to show the divs side by side with no gutter on the left on the first element and no gutter on the right on the second element.

This would enable me to have 2 elements side by side with a gutter in the middle, as opposed to what I have now: -

http://s13.postimg.org/xnh8sy40n/Untitled_2.png

Heres my full LESS file, any help would be appreciated, I don't think Responsable allows for this out of the box: -

/**
                 * Responsable Grid System
                 */
            /* ========================================================== */
            /* = Site Variables                                         = */
            /* ========================================================== */

            /* Grid options */
            @gutter_width: 18px; // Your gutter width
            @columns: 12; // The amount of columns you want
            @max_width: 960px; // Set a maximum width of the site

            // Half the gutter for borders, margin, padding etc
            @gutter: @gutter_width*0.5;

            /**
             * Baseline
             * 
             * Common settings for this:
             * 
             * 100% for 16px font and 24px baseline.
             * 
             * 75% for 12px font and 18px baseline.
             * 
             */
            @baseline: 100%;

            /* Font variables */
            @body_color: #333;
            @heading_color: #111;

            @body_family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
            @heading_family: "Open Sans Condensed", "Helvetica Neue", Arial, Helvetica, Sans-Serif;

            /* Link colors */
            @link: #6bac60;
            @link_hover: #78aace;

            /* Select colors */
            @select: #78aace;
            @select_color: #fff;

            /* Default Colors */
            @grey_light: #ddd;
            @grey_regular: #ccc;
            @grey_dark: #666;

            @green: #6bac60;

            /* ========================================================== */
            /* = Import normalize baseline and grid                    = */
            /* ========================================================== */

            @import "normalize.less";
            @import "baseline.less";
            @import "grid.less";

            /* ========================================================== */
            /* = Your custom styles go here                             = */
            /* ========================================================== */

            .wrapper {
                max-width: 960px;
                margin: 0 auto;
            }

            header {
                .clearfix();
                .column(12, 0);
                div {
                    .column(6);
                }
            }

            @media screen and (max-width: 520px){

            }

解决方案
When you inspect the .column mixin in the grid.less file of the Responsable-Framework you will find that each column got a padding on each side of half size the gutter-width.

Notice that the grid uses box-sizing: border-box see also Why did Bootstrap 3 switch to box-sizing: border-box?

leveraging the .column mixin you can set the second argument to 0 to remove the padding (gutter):
header {
div {
.column(6,0);
}
}
The above also removes the gutter between you div elements, to remove the gutter only on the borders of the grid you can use the following Less code:
header {
div {
.column(6);
&:first-child {
padding-left: 0; 
}
&:last-child {
padding-right: 0; 
}
}
}


                        
这篇关于如何改变响应CSS网格的天沟宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！