如何使用 Less 在 Bootstrap 中自定义网格的偏移选项

Question

我想减少 bootstrap 的 col-md-offset-1 在某个地方分配 margin-left 的宽度。我希望使用 LESS 来完成此操作。

Answer 1

您实际上并不需要 Less，因为那里的解决方案与纯 CSS 中的解决方案完全相同。只需覆盖相应的属性:

@media (min-width: 992px) {
    .col-md-offset-1 {
       margin-left: 42%; /* <- your value here */
    }
}

在 Less 中，您可以修改方法 Bootstrap 生成所有此类 offset 类（通过 overriding/cascading these mixin and variables），但这对你真正需要的那个微小的变化）。

Answer 2

@seven-phases-max 写道：

You don't really need Less for this since the solution there would be exactly the same as in pure CSS.

我不同意。 Bootstrap 使用 Less 来帮助您编写 DRY（不要重复自己）。当您开始对您的更改进行硬编码时，您的更改将来会在您更改某些框架参数时中断。

更改 .col-md-offset-1 的行为取决于为媒体查询设置 min-width 的 @screen-md-min 变量，请参阅：http://getbootstrap.com/css/#grid-media-queries

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

所以在我看来，您的 Less 代码应该如下所示：

@import "bootstrap"
@media (min-width: @screen-md-min) {  
  .col-md-offset-1 {
   margin-left: 42%; /* <- your value here */
  }
}

使用上面的你应该注意到你不能重新编译 Bootstrap 没有运行 autoprefixer，见：http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/

为了让您的更改永不过时，您还应该考虑让您的修改仅适用于您需要的情况（并且不要更改预定义 .col-md-offset-1 本身的属性）。例如，通过使用网格的唯一父级；

html

<div id="maincontent"><div class="container"><class="row"><div class=".col-md-offset-1">

少

@import "bootstrap"
@media (min-width: @screen-md-min) {  
  #maincontent .col-md-offset-1 {
   margin-left: 42%; /* <- your value here */
  }
}

How to customize the offset options for grid in Bootstrap using Less