Question

我正在使用ResponsableCSS（.com）网格。

一切都很好，我唯一的问题是我无法修改装订线宽度，以便我有以下内容： -

使用以下两个div并排分为2列： -

            header {
                div {
                    .column(6);
                }
            }

整个网格是12除以6 = 2

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

这将使我能够将2个元素并排放在中间的排水沟中，而不是我现在所拥有的： -

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

继承我完整的LESS档案，任何帮助都会受到赞赏，我不认为责任允许开箱即用： -

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

            /* ========================================================== */
            /* = 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){

            }

Answer 1

当您检查Responsable-Framework的grid.less文件中的.column mixin时，您会发现每个列在沟槽宽度的一半大小的每一侧都有填充。

请注意，网格使用box-sizing: border-box，另请参阅Why did Bootstrap 3 switch to box-sizing: border-box?

利用.column mixin，您可以将第二个参数设置为0以删除填充（gutter）：

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

上面也删除了div div元素之间的装订线，只删除网格边框上的装订线，可以使用下面的代码：

header {
div {
.column(6);
&:first-child {
padding-left: 0; 
}
&:last-child {
padding-right: 0; 
}
}
}

如何在Responsable CSS Grid上更改装订线宽度

1 个答案: