css - 如何在响应式 CSS 网格中更 retrofit 订线宽度

Question

我正在为 LESS 使用 ResponsableCSS (.com) 网格。

一切都很好，我唯一的问题是我无法修 retrofit 订线宽度，所以如果我有以下内容:-

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

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

整体格子是12除以6=2

但我想并排显示 div，第一个元素的左侧没有装订线，第二个元素的右侧没有装订线。

这将使我能够并排放置 2 个元素，中间有一个装订线，而不是我现在拥有的:-

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

这是我的完整 LESS 文件，如有任何帮助，我将不胜感激，我认为 Responsable 不允许开箱即用:-

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

            /* ========================================================== */
            /* = 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 混合宏，您可以将第二个参数设置为 0 以删除填充(装订线):

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

上面还删除了 div 元素之间的间距，要仅删除网格边界上的间距，您可以使用以下 Less 代码:

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