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

Question

我知道Bootstrap 3的最大网格宽度为1170px。但是，我的客户希望他的网站使用960px的宽度。它应缩放到960px以下，但不超过。

问题：

1。）我在该960px容器的Bootstrap自定义页面上有什么更改？那沟渠呢？

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

Answer 1

您可以通过转到官方自定义页面并更改所需的任何自定义，并根据您的问题进行更改更改：

对于问题的第一部分：

1. 转到"自定义"页面，然后转到" strong>"部分（容器大小），对不同屏幕大小上的.container大小进行更改。

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

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

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

1. 您可以为新发布的Bootstrap执行此步骤，但是请注意，因为现在您将在项目文件夹中包含您的文件，并且将无法使用CDN "内容交付网络" 包括bootstrap。

2. 制作一个单独的CSS文件，例如（MEDIA.CSS），并且仅在此文件中，而是您自定义的值（网格系统，媒体查询断点，gutter））并在主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 ，但请确保您了解此规则：（容器width =您的输入值 天沟值）因此，要完成您想要（960px = ?? px ?? px的960px）：

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

因此，总而言之，您的容器值（您需要的960px）是（容器宽度=您输入的值 gutter值）。

然后，当您构建网站时，将您的元素包装在容器类中中，请最大值为960px。我建议您以这种方式分割您的网站页面：

• 标题部分在容器内部。
• 主体部分在容器内部。
• 页脚部分在容器内部。
• 也尽可能遵循HTML5新的语义元素（例如，标题，部分，部分，文章，页脚等）。

希望这对您的项目有所帮助。