-1

我正在寻找一种自定义引导布局的有效方法。目前我使用 layoutit.com 获取基本布局，然后使用软件括号进行编辑。我对 less 进行了更改以进行自定义。但这很复杂……我的问题是：

-Layoutit 很棒，但放置一些容器非常奇怪，因此您必须手动更改它

-Brackets 只向您显示用于特定 html 的 css 规则（就像 firefox 一样），但它不能显示应用较少的规则，并且它可以处理缩小的 css 内容（顺便说一句），因此您不能真正以这种方式进行更改一种快速有效的方法

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

那么我能做些什么来快速布局和定制有效呢？有什么帮助吗？

4

1 回答 1

0

在 SASS 和 LESS 中自定义它非常简单，也是最有效的方法——因为这是你的问题。查看源代码，特别是从第 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;
}
于 2013-12-03T13:47:38.847 回答