Bootstrap, less，如何更改嵌套行的@grid-columns 数？

Question

我正在构建一个 bootstrap 3 布局，我正在尝试更改嵌套行的列数，以便嵌套列的宽度与顶级列的宽度相同。我尝试过类似的方法但无济于事。

<main id="container" class="section">
  <div class="main-body">
    <div class="sidebar">
        <p>content</p>
    </div>
    <div class="main-content">
        <div class="items">
            <div class="item-1">
                <p>content</p>
            </div>
            <div class="item-2">
                <p>Content</p>
            </div>
        </div>
    </div>
  </div>
</main>

.section{
    .container; 
}

.col-sm-2, .col-sm-10, .col-sm-8{
    border: 1px solid black;    
}
.main-body {
  .make-row();
  .sidebar {
    .make-sm-column(2);
  }
  .main-content {
    .make-sm-column(10);
  }
  @grid-columns: 10;
  .items {
    .make-row();
    .item-1{
      .make-sm-column(2);
    }
    .item-2{
      .make-sm-column(8);
    }
  }
  @grid-columns: 12;
}

嵌套行内的网格似乎仍然有 12 列，我希望它有 10 列。我在上面找到了这个例子：article 这家伙在 sass 中完成了它，我在 less 中重写了它，因为我不是一个 sass 用户，但不幸的是它没有用。我做错了什么？

Answer 1

在 Less 变量中是 lazy loaded (for more detailed/friendly tutorial on what this actually means for your code see Variable Semantics)。

因此，上面代码段的第一个问题是 .main-body 末尾的 @grid-columns: 12; 覆盖了 @grid-columns: 10;（因此它在那里根本不起作用）。

第二个问题比较棘手，即使你删除了.main-body末尾的@grid-columns: 12;，@grid-columns: 10;仍然不会像那些一样对网格混合有任何影响仍将使用全局定义的 @grid-columns 的值，即 12（您可以覆盖全局值，但这将适用于每个网格 class，包括默认值，即不是我们的真正目标） .

好吧，为了不打扰您越来越多关于变量范围、命名空间和可见性的令人头疼的细节，这里可能是最简单的解决方案（以及其他一些）：

在 .items 中定义 @grid-columns: 10;（假设这是你需要的范围）然后重新导入定义相应网格混合的文件也在 .items 中，这样你就可以了只需获取应用了 @grid-columns: 10; 的那些网格混合的副本：

.main-body {
    // here default `@grid-columns: 12` applies:
    .make-row();
    .sidebar      {.make-sm-column(2)}
    .main-content {.make-sm-column(10)}

    .items {
        // here we use 10 columns:
        @import (multiple) "<bootstrap>/less/mixins/grid.less";
        @grid-columns: 10;
        .make-row();
        .item-1 {.make-sm-column(2)}
        .item-2 {.make-sm-column(8)}
    }
}

Answer 2

这也应该有效：

.section {
    .container;
}

.main-body {
    .make-row();

    .sidebar,
    .item-2 {
        .make-sm-column(2);
    }

    .item-1 {
        .make-sm-column(8);
    }
}

编辑：但最好在 html 标记中使用 Bootstraps 类以防止 CSS 文件膨胀：

<main id="container" class="section">
  <div class="main-body row">
    <div class="sidebar col-sm-2">
        <p>content</p>
    </div>
    <div class="main-content">
        <div class="items">
            <div class="item-1 col-sm-8">
                <p>content</p>
            </div>
            <div class="item-2 col-sm-2">
                <p>Content</p>
            </div>
        </div>
    </div>
  </div>
</main>

Bootstrap, less，如何更改嵌套行的@grid-columns 数？

Bootstrap, less, how to change number of @grid-columns for nested rows?

less

twitter-bootstrap