Bootstrap 3：如何编译和下载960px的自定义宽度？如何更新？

Question

据我所知，Bootstrap 3使用的最大网格宽度为1170px。但是，我的客户希望他的网站使用960px的宽度。它应缩小至960px以下，但不得高于。

问题：

1.。）我在960px容器的Bootstrap Customize页面上做了哪些更改？排水沟怎么样？

2。）随着新版本的Bootstrap将来发布，我如何在不覆盖自定义960px文件的情况下更新我的文件？

Answer 1

您可以转到official customize page进行Bootstrap项目所需的任何自定义，并根据您的问题更改所需内容：

问题的第一部分：

1. 转到自定义页面，然后前往（容器尺寸）部分，在不同的屏幕尺寸上为.container尺寸进行所需的更改。

2. 转到（媒体查询断点）部分，对布局更改的断点进行调整，也取决于您的需要。

3. 转到（网格系统）部分，然后更改.gutter值，我认为10px可以正常工作。 “gutter值定义列之间的填充”

现在作为 问题的第二部分 ：

1. 您可以为新发布的Bootstrap执行此步骤，但要小心，因为现在您将文件包含在项目文件夹中，并且无法使用CDN “Content Delivery Network”包括Bootstrap。

2. 创建一个单独的css文件，例如（media.css），并且仅在此文件中，但为其自定义的值（网格系统，媒体查询断点，装订线） 并在主Bootstrap css之后包含它，并在您将用于项目其他部分的自定义css文件之上。

   < bootstrap.css >   ----------  main css file.
   < media.css >       ----------  only for container width,breakpoints,gutter.
   < custom.css >      ----------  any other css for the project.
   

<强>更新

为了让您更容易理解，请转到 第1点 的自定义页面，但请确保您了解此规则：（容器宽度=您输入的值+ gutter value）所以要完成你想要的960px （960px = ?? px + ?? px for the gutter）：

• 将默认装订线值@grid-gutter-width从30px更改为20px。
• 将容器大值@container-large-desktop从1140px更改为940px

总而言之，您的容器值（您需要的960px）是（容器宽度=您输入的值+装订线值）。

然后在您构建网站之后，将您的元素包装在容器类中，您的最大值将是960px。我建议你按照这种方式划分你的网页：

容器内的
• 标题部分。
• 容器内的主体部分。
容器内的
• 页脚部分。
• 也请尽可能遵循HTML5 new semantic elements（例如HEADER，ASIDE，SECTION，ARTICLE，FOOTER，.....等）。

希望这可以帮助您完成项目。