如何使用 Bootstrap 为移动站点设置容器 div 的宽度答案

【问题标题】：How can I set the container div's width for a mobile site with Bootstrap如何使用 Bootstrap 为移动站点设置容器 div 的宽度
【发布时间】：2016-05-02 17:02:08
【问题描述】：

我正在制作一个仅限移动设备的网站，例如“m.domainname.com”。我想在我的网站中使用 Bootstrap。但是，对于主容器 div，如果我使用“容器”类，它将是 1170px。我的网站以 1024px 开头。

如何设置容器 div 的宽度？我这样做对吗？

【问题讨论】：

标签： html css twitter-bootstrap containers responsive

【解决方案1】：

如何将容器宽度从 1170 更改为 1024 像素？查看 bootstrap.css 并更改它

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

到

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

【讨论】：

【解决方案2】：

如果您的网站仅适用于移动设备，则您的 CSS 无需使用 @media (min-width:1200)。如果您不想设置实际金额，则可以这样做：

.container {width:95%; margin-right:auto; margin-left:auto;}

【讨论】：

【解决方案3】：

如果您不需要为容器设置显式宽度，则可以使用 Bootstrap 的 container-fluid 类。来自他们的Grid documentation：

行必须放置在 .container（固定宽度）或 .container-fluid（全角）用于正确对齐和填充。

如果您确实需要在不同的断点为容器设置明确的宽度，您可以使用您的数字generate a customized CSS file for Bootstrap。该链接允许您设置容器宽度：

平板电脑
小
桌面
中等
大桌面
大

它还允许您更改许多其他默认值。

【讨论】：