css - 将 Bootstrap 自定义为 960px 宽

Question

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

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

提前致谢，理查德。

Answer 1

在 Bootstrap 中，默认情况下:容器类具有媒体查询中指定的以下 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.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