Twitter bootstrap 引导，更少，如何更改嵌套行的@grid列数？

我正在构建一个bootstrap3布局，并尝试更改嵌套行的列数，以便嵌套列与顶级列具有相同的宽度。 我试过这样的东西，但没有用

<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;
}

内容

内容

内容

.科{
.集装箱；
}
.col-sm-2、.col-sm-10、.col-sm-8{
边框：1px纯黑；
}
.主体{
.make-row（）；
.侧边栏{
.制作sm列（2）；
}
.主要内容{
.制作sm列（10）；
}
@网格柱：10个；
.项目{
.make-row（）；
.项目-1{
.制作sm列（2）；
}
.项目-2{
.制作sm列（8）；
}
}
@网格柱：12个；
}

嵌套行中的网格似乎仍然有12列，我希望它有10列。 我发现上面的例子如下： 那个家伙用sass做的，我用更少的篇幅重写了它，因为我不是一个sass用户，但不幸的是，它不起作用。 我做错了什么？

中的少变量是（有关这对代码的实际意义的更详细/友好的教程，请参阅）

因此，上面代码片段的第一个问题是

@grid columns:12

覆盖@网格列：10（因此它在那里根本不起作用）

第二个问题更棘手，即使删除

@grid columns:12

在

主体的末尾，
@网格列：10
仍然不会对网格混合产生任何影响，因为它们仍然会使用全局定义的
@网格列的值，即
12
（您可以覆盖全局值，但这将适用于每个网格类，包括默认值，即并非我们的目标）

好吧，为了不让您为变量范围、名称空间和可见性等越来越多令人挠头的细节而烦恼，这里可能是最简单的解决方案（在其他几个解决方案中）：

定义
@网格列：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)}
    }
}

。主体{
//此处默认的“@网格列：12”适用于：
.make-row（）；
.sidebar{.make sm column（2）}
.main content{.make sm column（10）}
.项目{
//这里我们使用10列：
@导入（多个）”/less/mixins/grid.less”；
@网格柱：10个；
.make-row（）；
.item-1{.make sm column（2）}
.第2项{使sm列（8）}
}
}
中的变量较少（有关这对代码的实际意义的更详细/友好的教程，请参阅）

因此，上面代码片段的第一个问题是
@grid columns:12
覆盖
@网格列：10（因此它在那里根本不起作用）

第二个问题更棘手，即使删除
@grid columns:12
在
主体的末尾，
@网格列：10
仍然不会对网格混合产生任何影响，因为它们仍然会使用全局定义的
@网格列的值，即
12
（您可以覆盖全局值，但这将适用于每个网格类，包括默认值，即并非我们的目标）

好吧，为了不让您为变量范围、名称空间和可见性等越来越多令人挠头的细节而烦恼，这里可能是最简单的解决方案（在其他几个解决方案中）：

定义
@网格列：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)}
    }
}

。主体{
//此处默认的“@网格列：12”适用于：
.make-row（）；
.sidebar{.make sm column（2）}
.main content{.make sm column（10）}
.项目{
//这里我们使用10列：
@导入（多个）”/less/mixins/grid.less”；
@网格柱：10个；
.make-row（）；
.item-1{.make sm column（2）}
.第2项{使sm列（8）}
}
}
这也应该有效：

.section {
    .container;
}

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

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

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

编辑：但最好在html标记中使用引导类来防止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>


内容

内容

内容

这也应该有效：

.section {
    .container;
}

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

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

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

编辑：但最好在html标记中使用引导类来防止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>


内容

内容

内容

当将Sass代码转换为更少的代码时，首先要知道的是这些语言的差异。那么，您能告诉我我到底做错了什么吗？这应该是一个简单的例子，但我想不出来。我最近才开始使用更少的sass，我以前从未使用过sass。当将sass代码转换为更少的代码时，首先要知道的是这些语言之间的差异。那么你能告诉我我到底做错了什么吗？这应该是一个简单的例子，但我想不出来。我只是最近才开始少用，我以前从来没有用过沙斯。天哪，这很有效！自从我第一次开始使用bootstrap以来，我就希望能够做到这一点。太谢谢你了，天哪，真管用！从我第一次开始我就想做这样的事情