如何在bootstrap 3.0.2中将容器宽度设置为980px？

问题描述

在bootstrap 3.0中，我可以用我的类包装 .container 类，并将 width code> 980px

EX

 < div class =maincontainer> 
< div class =container> 
 //一些内容
< / div> 
< / div> 
  

CSS

  .maincontainer {
 max-width：980px; 
 margin：0 auto; 
} 
  

该代码将包装我的内容 980px ，
，但在bootstrap 3.0.2中，作者已将 .container 更改为 width

因此很难设置 980px 为我的布局！
我使用LESS css！

任何想法？

解决方案

几个选择

在引导程序中，如果在网格上使用响应式设计，则 width 由变量（控制 variables.less 文件中的宽度，以实现 980px （对于任何你想要的大小），然后将使 .container 控制宽度和你想要的。

选择＃2

如果你想通过 .maincontainer 类来控制宽度，那么在＃1中注释的同一个变量文件中，改变所有 @ container-XX （用于 sm ， md ， lg ）为 auto ，这将使元素适合包装容器 .maincontainer 。

如果您不想要一个响应式网站all，but a statically set 980px 然后按照

我的猜测是你实际上想要＃3 ，但我想我也会提到其他想法。

In bootstrap 3.0 I can wrap .container class with my class and set the width to my class to 980px

EX

             <div class="maincontainer">
                   <div class="container">
                       //some content
                   </div>
             </div>

CSS

         .maincontainer {
             max-width: 980px;
             margin:0 auto;
         }

That code will wrap my contents with 980px,but in bootstrap 3.0.2 the author has change class .container to width not max-width in bootstrap 3.0.

So it is hard to set 980px for my layout!!I'm using LESS css!

Any ideas?

解决方案

A few of choices

In bootstrap, if one is using responsive design on the grid, then width is set by a variable (currently in 3.0.2 on line 43 of grid.less and following, depending on size).

Choice #1

Change the @container-XX variable(s) controlling the width in the variables.less file to achieve the 980px (for whatever size(s) you want it) which will then make the .container control the width and be what you want. I recommend this only if you actually still want some form of responsive site.

Choice #2

If you want to control the width still by your .maincontainer class, then in the same variable file noted in #1, change all the @container-XX (for sm, md, lg) to be auto which will make elements fit to the wrapping container .maincontainer.

Choice #3

If you do not want a responsive site at all, but a statically set 980px then follow the directions in this SO answer.

My guess is you actually want #3, but I thought I would mention the other ideas as well.

这篇关于如何在bootstrap 3.0.2中将容器宽度设置为980px？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！