Bootstrap 3 - 为桌面设置最大容器宽度为940px？

我正在使用Twitter Bootstrap 3为网站添加一个全新的部分，但容器不能超过940像素的Desktop宽度，因为它会丢弃页眉和页脚{includes}。Bootstrap 3 - 为桌面设置最大容器宽度为940px？

因此，940px在12 x 60 = 720px的列中工作，11 x 20 = 220px的水槽。不够公平，但是如何将这些输入到Bootstrap 3中，因为在Customize部分中没有'@ColumnWidth字段/设置？

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

2013-10-17 ubique

首先考虑小网格，请参阅：http://getbootstrap.com/css/#grid-options。 750像素的最大容器宽度将可能小你（也阅读：Why does Bootstrap 3 force the container width to certain sizes?）

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

@media（最小宽度： 768px）{ .container { max-width：750px; } }

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

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

也会有的20像素网格上的两侧上的沟槽，以便220 + 720 + 40使得980px

有“不” @ColumnWidth

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

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

更新集@网格沟宽度改为20 px ;, @容器桌面：940px ;, @容器大型桌面：@容器桌面并重新编译bootstrap。

来源

2013-10-17 18:56:33

对于这个项目来说，小网格太小了，因为需要达到940px，就像网站的其他部分一样。您对“重复”的引用 - 我在发布我的问题之前尝试过，并没有解决问题？谢谢。 – ubique

查看更新 –

Hi-bit confused here !?你有'容器桌面'写了两次，一个值为940px，另一个没有？ – ubique

在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 3.0。2

来源

2013-11-22 01:20:04

当我需要在单个css文件中声明所有内容时，例如在CodePen内部，我该怎么做？即使使用'！important'标签，它似乎也不起作用。 – chiffa

如果一切都存在于单个文件中，我相信只要确保我上面为'custom.css'概述的定义最终位于文件的最底部*就可以使其工作。这应该确保他们最后得到应用。未经测试，YMMV。 –

不幸的是我在CodePen中测试了它，但没有成功。我会尽力弄清楚，谢谢你的回应。 – chiffa

最好的选择是使用原始LESS版本的bootstrap（从github获取它）。

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

查找这个代码，并改变断点值：

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

将其更改为9999px例如，这将阻止断点因此您的网站将始终加载以前的媒体查询，其中包含940像素的容器

来源

2013-12-16 22:08:11 Snade

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

在自定义的CSS文件粘贴此：

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

我我的容器这里设置为960像素的任何东西，可容纳它，并保持休息介质尺寸为默认值。您可以将其设置为940px以解决此问题。

来源

2015-02-25 08:05:13

如果如果不工作，然后用

@media（最小宽度：1200像素）{ .container { 宽度： “重要！”！970像素重要; } }

来源

2015-05-29 18:59:48 ziaprog

Bootstrap 3 - 为桌面设置最大容器宽度为940px？

回答

相关问题