css - 如何在 Bootstrap 网格中获得 18 列

Question

我将最新的 Bootstrap 版本 3.2.0 与 MVC 5 一起使用，我对两者都是新手。

我想做的是使用 Bootstrap 制作一个包含 18 列的网格。我可以在这里看到http://getbootstrap.com/css/#grid-less通过更改 @grid-columns 确实有可能。

所以在我的 MVC View 中，我尝试这样做:

<style>
    @grid-columns: 18;
</style>

后跟此 HTML:

<div class="row">
  <div class="col-lg-1">col 1</div>
  <div class="col-lg-1">col 2</div>
  <div class="col-lg-1">col 3</div>
  <div class="col-lg-1">col 4</div>
  <div class="col-lg-1">col 5</div>
  <div class="col-lg-1">col 6</div>
  <div class="col-lg-1">col 7</div>
  <div class="col-lg-1">col 8</div>
  <div class="col-lg-1">col 9</div>
  <div class="col-lg-1">col 10</div>
  <div class="col-lg-1">col 11</div>
  <div class="col-lg-1">col 12</div>
  <div class="col-lg-1">col 13</div>
  <div class="col-lg-1">col 14</div>
  <div class="col-lg-1">col 15</div>
  <div class="col-lg-1">col 16</div>
  <div class="col-lg-1">col 17</div>
  <div class="col-lg-1">col 18</div>
</div>

但这行不通。我应该怎么做才能让它正常工作？

谢谢!

Answer 1

如另一个答案中所述，您可以转到 Bootstrap Customizer 下载具有 18 列的自定义版本的 Bootstrap。并制作自定义引导文件。但是，您应该意识到这不是面向 future 的解决方案。如果您想更新 Bootstrap ，则需要以相同的方式更新这些变量以获得不会破坏您的功能的版本。

我建议您熟悉 LESS 及其编译方式，这样您就可以制作自己的 LESS 源文件。这是 LESS 主页:http://lesscss.org/

为了让您开始了解一些简单的事情:第一，LESS 是 CSS 的扩展，它需要一个特殊的编译器将其转换为标准 CSS。您在网站中包含的是这个标准 CSS，而不是 LESS 本身。第二，可以使用某些引擎按需编译 LESS，但设置起来有点棘手。你可以用这个类比来思考这种关系:php 是 html 所以 LESS 是 CSS/p>