引导网格，列比例

问题描述

我或不建议更改Bootstrap列的百分比以实现不同的比例。我的意思是。

默认

  .col-lg-3 {
宽度：25％； 
} 
 
 .col-lg-9 {
宽度：75％； 
} 
  

更改为

  .col-lg-3 {
宽度：20％； 
} 
 
 .col-lg-9 {
宽度：80％； 
} 
  

如果是的话，如何以及在何处更改较少的变量？

解决方案

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

转到定制器（）

然后执行以下操作：

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

如果使用较少，则可以打开变量.less找到变量：

  @ grid-columns：12; 
  

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

  @ grid-columns：15; 
  

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

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

  @media（最小宽度：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> 
  

Can I or is not advised to change Bootstrap columns percentage to achieve different proportions. What I mean.

default

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

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

changing to

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

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

if so how and where do I change the less variables?

解决方案

The .col-X-3 = 20% and a col-X-12 (NOT -9) is a 15 column grid not 12. You can do two things:

Go to the customizer (http://getbootstrap.com/customize/#grid-system)

And do this:

Then you will need to use different classes in your html since this is 100/15. You will see the new classes in the un-minified version of your download (at the bottom of the page).

If you use less, you would open up the variables.less locate the variable:

@grid-columns: 12;

COPY THAT. Create your OWN custom-variables.less file, import that after the bootstrap variables.less file in your import file and change the value:

@grid-columns: 15;

Then recompile with your application.

Otherwise, create your own columns in the min-width media query of your choice.

@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>

这篇关于引导网格，列比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！