引导程序更少，如何更改嵌套行的@grid列数? [英] Bootstrap, less, how to change number of @grid-columns for nested rows?

问题描述

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

I'm building a bootstrap 3 layout and I'm trying to change the number of columns for the nested row so that the nested columns have the same width as top-level columns. I tried something like this but to no avail.

<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列. 我在上面找到了以下示例:文章 那个家伙是用无礼的方式完成的，而我改写的次数少了，因为我不是一个无礼的用户，但是不幸的是它没有用. 我在做什么错了?

The grid inside the nested row still seems to have 12 columns, and I want it to have 10. I found the example above in this: article The guy did it in sass and I rewrote it in less because I'm not much of a sass user, but unfortunately it didn't work. What am I doing wrong?

推荐答案

在Less变量中，延迟加载(有关这实际上对您的代码意味着什么的更详细/友好的教程，请参见

In Less variables are 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;(因此它根本就没有作用).

Thus the first problem of your snippet above is that @grid-columns: 12; at the end of the .main-body overrides @grid-columns: 10; (so that it simply has no effect there).

第二个问题更加棘手，即使您在.main-body的末尾删除@grid-columns: 12;，@grid-columns: 10;仍然不会对网格混合产生任何影响，因为它们仍将使用全局值定义为12的@grid-columns(您可以覆盖全局值，但是它将应用于每个网格类，包括默认值，即，实际上不是我们的目标).

The second problem is more tricky, even if you remove @grid-columns: 12; at the end of the .main-body, @grid-columns: 10; still won't have any effect on the grid mixins as those will still use the value of the globally defined @grid-columns which is 12 (you could override the global value but that will apply to every grid class incl. defaults, i.e. not really our goal).

好吧，不要让您烦恼越来越多的关于变量范围，命名空间和可见性的详细信息，这可能是最简单的解决方案(在其他解决方案中):

Well, to not bother you with more and more head-scratching details on variables scope, namespacing and visibility, here probably the most simple solution (among a few others):

在.items内定义@grid-columns: 10;(假设这是您需要的作用域)，然后重新导入定义相应网格混入的文件，也就在.items内部，这样您就可以得到这些网格混入的副本在应用@grid-columns: 10;的情况下:

Define @grid-columns: 10; inside .items (assuming this is the scope you need it) and then reimport the file that defines corresponding grid mixins also right inside .items, so that there you just get a copy of those grid mixins with @grid-columns: 10; applied:

.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)}
    }
}

这篇关于引导程序更少，如何更改嵌套行的@grid列数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！