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做的，我把它重写得更少，因为我不是一个sass用户，但遗憾的是它不起作用。我做错了什么？

Answer 1

In Less变量是lazy loaded（有关这对代码实际意义的更详细/友好的教程，请参阅Variable Semantics）。

因此，上面代码段的第一个问题是@grid-columns: 12;末尾的.main-body会覆盖@grid-columns: 10;（因此它在那里没有效果）。

第二个问题更棘手，即使您在@grid-columns: 12;结束时移除.main-body，@grid-columns: 10;仍然不会对网格混合有任何影响仍将使用全局定义的@grid-columns 12的值（您可以覆盖全局值，但这将适用于每个网格类，包括默认值，即不是我们的目标）。

好吧，不要为变量范围，命名空间和可见性带来越来越多令人头疼的细节，这里可能是最简单的解决方案（在其他一些解决方案中）：

在@grid-columns: 10;内定义.items（假设这是你需要它的范围），然后重新导入在.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数量？

2 个答案: