Question

我正在寻找一种有效的方法来自定义引导程序布局。目前我使用layoutit.com获取基本布局，然后使用软件Brackets进行编辑。我对自定义的更改做了更改。但这种方式非常复杂......我的问题是：

-Layoutit很棒但是放置一些容器非常奇怪所以你必须手动更改

-Brackets只显示css规则用于特定的html（就像firefox一样），但它不能显示适用的规则少，它可以处理缩小的css内容（顺便说一下），所以你无法真正做出改变以这种方式快速有效地

- 在firefox中编辑效果很好，但它只编辑css而无法保存更改。

那么我该如何快速布局并定制有效？有什么帮助吗？

Answer 1

在SASS和LESS中自定义它非常简单，也是最有效的方法 - 因为这是你的问题。源Take a look，特别是在第240行开始的variables.less文件中。

// Number of columns in the grid system
@grid-columns:              12;

// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;

将这两个值更改为您想要的值，基本上就完成了。

如果您正在使用容器，您还需要查看该文件的底部。

/ Small screen / tablet
@container-tablet:             ((720px + @grid-gutter-width));
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            ((940px + @grid-gutter-width));
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
@container-lg:                 @container-large-desktop;

您可以在此处自定义容器的大小。

Bootstrap还附带了mixins，因此您可以使用语义名称创建自己的网格。以下示例将提供一个居中的列，其宽度为容器大小的50％。

.post {
  @include make-lg-column(6);
  @include center-block;
}

自定义引导程序的有效方法？

1 个答案: