Bootstrap griding，列比例

Question

我是否可以建议更改Bootstrap列百分比以达到不同的比例。我的意思。

默认

.col-lg-3 {
    width: 25%;
}

.col-lg-9 {
    width: 75%;
}

更改为

.col-lg-3 {
    width: 20%;
}

.col-lg-9 {
    width: 80%;
}

如果是这样，我如何以及在哪里更改较少的变量？

Answer 1

可以在此处编辑，编译和下载Twitter Bootstrap的较少变量： http://getbootstrap.com/customize/#less-variables

但是，我不认为您可以通过宽度更改列的百分比 - 仅控制列数，装订线宽度，断点等。

但是，您可以创建另一个CSS文件来覆盖Bootstrap的网格并创建自己的网格。但要改变这些百分比要谨慎，因为一栏会影响其他人。例如，您可能已经更改了.col-lg-3和col-lg-9并且它们组合在一起 - 但是当您开始使用四个.col-lg-3时，它们将不再适合。

col-lg-3 + col-lg-9 
= 20% + 80% 
= 100%

col-lg-3 + col-lg-3 + col-lg-3 + col-lg-3 
= 20% + 20% + 20% + 20% 
= 80%

我通常会做什么，当一个部分需要自定义百分比列时，我放置一个ID然后覆盖该特定部分内的bootstrap列，因此bootstrap的默认列百分比不会受到影响，无法在网站的其他部分受到影响像这样：

HTML：

<div id="custom" class="row">
   <div class="col-lg-3">
      Some Content
   </div>

   <div class="col-lg-9">
      Some Content
   </div>
</div>

CSS：

#custom > .col-lg-3 {
   width: 20%;
}
#custom > .col-lg-9 {
   width: 80%;
}

Answer 2

.col-X-3 = 20％和col-X-12（NOT -9）是 15列网格而不是12.您可以做两件事：

转到自定义程序（http://getbootstrap.com/customize/#grid-system）

并执行此操作：

然后你需要在你的html中使用不同的类，因为这是100/15。您将在下载的非缩小版本中看到新类（位于页面底部）。

如果使用less，则会打开变量。无法找到变量：

@grid-columns: 12;

复制。创建您的OWN custom-variables.less文件，在您的导入文件中导入 引导变量.less文件后更改值：

@grid-columns: 15;

然后使用您的应用程序重新编译。

否则，请在您选择的最小宽度媒体查询中创建自己的列。

@media (min-width:1200px) {
  .col-custom {float:left;padding-left:15px;padding-right:15px;}
  .col-20p {width:20%;)
  .col-80p {width:80%;)
 }
}

<div class="container">
  <div class="row">
    <div class="col-custom col-20p">...</div>
    <div class="col-custom col-80p">...</div>
  </div>
</div>