34

我正在使用 Twitter Bootstrap 3 向网站添加一个全新的部分，但是对于桌面来说，容器的总宽度不能超过 940 像素 - 因为它会丢弃页眉和页脚 {includes}。

所以 940 像素的列是 12 x 60 = 720 像素，排水沟是 11 x 20 = 220 像素。很公平，但是由于“自定义”部分中没有“@ColumnWidth”字段/设置，您如何将这些输入到 Bootstrap 3 中？

我尝试将@container-lg-desktop 和@container-desktop 都设置为940px - 但它不起作用。

4

5 回答 5

94

Bootstrap 3 中有一个更简单的解决方案 (IMO)，不需要您编译任何自定义 LESS。您只需要利用“级联样式表”中的级联。

像这样设置你的CSS加载......

<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />

/css/custom.css你独特的风格定义在哪里。在该文件中，添加以下定义...

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

width: 1170px当视口为 1200 像素或更大时，这将覆盖 Bootstrap 的默认设置。

在 Bootstrap 3.0.2 中测试

于 2013-11-22T01:20:04.373 回答
16

首先考虑小网格，请参阅： http: //getbootstrap.com/css/#grid-options。750 px 的最大容器宽度可能对您来说太小了（另请阅读：为什么 Bootstrap 3 将容器宽度强制设置为特定大小？）

使用小网格时，使用媒体查询来设置最大容器宽度：

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

其次还阅读了这个问题：Bootstrap 3 - 940px width grid? ，可能重复？

12 x 60 = 720 像素的列和 11 x 20 = 220 像素

网格两侧也会有 20px 的间距，因此 220 + 720 + 40 为 980px

没有'@ColumnWidth'

您的列宽度将根据您在 variables.less 中的设置动态计算。你可以设置@grid-columns和@grid-gutter-width。列的宽度将通过 mixins.less 中的 grid.less 设置为百分比：

.calc-grid(@index, @class, @type) when (@type = width) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}

更新 将 @grid-gutter-width 设置为 20px;, @container-desktop: 940px;, @container-large-desktop: @container-desktop 并重新编译引导程序。

于 2013-10-17T18:56:33.647 回答
6

最好的选择是使用原始 LESS 版本的引导程序（从 gi​​thub 获取）。

打开 variables.less 并查找 // 媒体查询断点

找到此代码并更改断点值：

// Large screen / wide desktop
@screen-lg:                  1200px; // change this
@screen-lg-desktop:          @screen-lg;

例如，将其更改为 9999px，这将阻止到达断点，因此您的站点将始终加载具有 940px 容器的先前媒体查询

于 2013-12-16T22:08:11.197 回答
5

如果您不想编译引导程序，请复制以下内容并将其插入您的自定义 css 文件中。不建议更改原始引导 css 文件。此外，如果您从 cdn 加载引导程序原始 css，您将无法修改它。

将此粘贴到您的自定义 css 文件中：

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

我在这里将我的容器设置为 960 像素以容纳任何可以容纳它的东西，并将其余媒体尺寸保持为默认值。对于这个问题，您可以将其设置为 940px。

于 2015-02-25T08:05:13.180 回答
1

如果如果不起作用，请使用“！重要”

@media (min-width: 1200px) { .container { 宽度: 970px !important; } }

于 2015-05-29T18:59:48.620 回答