如何在响应式 CSS 网格中更改装订线宽度答案

【问题标题】：How to change gutter widths on Responsable CSS Grid如何在响应式 CSS 网格中更改装订线宽度
【发布时间】：2014-10-10 02:21:15
【问题描述】：

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

一切都很好，我唯一的问题是我无法修改排水沟宽度，所以如果我有以下情况：-

两个 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){

            }

【问题讨论】：

标签： css responsive-design less grid-layout

【解决方案1】：

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

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

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

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

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

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

【讨论】：