Question

我使用最新的Bootstrap 3.2.0版和MVC 5，我对这两者都不熟悉。

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

所以在我的MVC视图中我试试这个：

<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版本。但是，您应该意识到这不是一个面向未来的解决方案。如果您想要更新引导程序，则需要以相同的方式更新这些变量，以获得不会破坏功能的版本。

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

为了让您开始了解一些简单的事情：其中，LESS是CSS的扩展，需要一个特殊的编译器才能将其转换为标准CSS。您在网站上包含的是此标准CSS，而不是LESS本身。第二，可以根据需要对某些引擎进行LESS编译，但设置起来有点棘手。你可以用这个比喻来考虑这种关系：php与html是LESS到CSS

Answer 2

只需下载自定义版本的Bootstrap 18列并解决问题。转到Bootstrap Customizer，然后在较少变量下的右栏中查找媒体查询断点

您还可以使用生成的自定义版本来研究如何在将来需要时自行完成

如何在Bootstrap网格中获得18列

2 个答案: