自定义 Bootstrap 为 960px 宽

Question

我想使用 Bootstrap 创建我新设计的宽度为 960px 的模板。但是，我不知道如何自定义 Bootstrap 来调整容器大小，这对我的项目来说太大了。

我有一个想法，但我不确定这样做是否正确。我可以只新建一个 "custom.css" 文档并将 .container class 编辑为 960px 吗？

提前致谢，理查德.

Answer 1

在 bootstrap 中，默认情况下：容器 class 在媒体查询中指定了以下 max-width。

@media (min-width: 768px){
  .container{
    max-width:750px;
  }  
}

@media (min-width: 992px){
  .container{
    max-width:970px;
  }
}

@media (min-width: 1200px){
  .container{
    max-width:1170px;
  }
}

要覆盖它，请将以下规则添加到您的样式表 custom.css（确保您的样式表 custom.css 在 bootstrap 样式表 bootstrap.min.css 之后加载）：

@media (min-width: 992px){
  .container{
    max-width:960px;
  }
}

@media (min-width: 1200px){
  .container{
    max-width:960px;
  }
}

如果需要，您也可以更改其他媒体查询规则。

这是 bootstrap 的默认网格选项列表。

http://getbootstrap.com/css/#grid-options

Answer 2

您可以在bootstrap中免费定制grid系统，关注bootstrap主页：http://getbootstrap.com/customize/#media-queries-breakpoints.

自定义 Bootstrap 为 960px 宽

Customize Bootstrap to 960px wide

css

customization

containers

resize

width