Bootstrap 3 - 将桌面的容器宽度设置为 940 像素最大值? [英] Bootstrap 3 - Set Container Width to 940px Maximum for Desktops?

问题描述

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

I am adding a whole new section to a website using Twitter Bootstrap 3, however the container cannot go wider than 940px in total for Desktop - as it will throw out the Header and Footer {includes}.

因此 940 像素适用于列的 12 x 60 = 720 像素和 11 x 20 = 220 像素的排水沟.很公平，但是您如何将这些输入到 Bootstrap 3 中，因为自定义"部分中没有@ColumnWidth"字段/设置?

So 940px works out at 12 x 60 = 720px for the columns and 11 x 20 = 220px for the gutters. Fair enough, but how do you input these into Bootstrap 3 as there is 'no' @ColumnWidth field/setting in the Customize section?

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

I have tried by setting the @container-lg-desktop and @container-desktop both to 940px - but it doesn't work.

推荐答案

首先考虑小网格，请参阅:http://getbootstrap.com/css/#grid-options.750 像素的最大容器宽度对您来说可能很小(另请阅读:为什么 Bootstrap 3 强制容器宽度为特定尺寸?)

In the first place consider the Small grid, see: http://getbootstrap.com/css/#grid-options. A max container width of 750 px will maybe to small for you (also read: Why does Bootstrap 3 force the container width to certain sizes?)

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

When using the Small grid use media queries to set the max-container width:

@media(最小宽度:768px){.容器 {最大宽度:750px；}}

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

第二次也读了这个问题:Bootstrap 3 - 940px 宽度网格?，可能重复?

Second also read this question: Bootstrap 3 - 940px width grid?, possible duplicate?

12 x 60 = 720px 列和 11 x 20 = 220px

12 x 60 = 720px for the columns and 11 x 20 = 220px

网格两边也会有一个 20px 的边沟，所以 220 + 720 + 40 会变成 980px

there will also a gutter of 20px on both sides of the grid so 220 + 720 + 40 makes 980px

没有@ColumnWidth

there is 'no' @ColumnWidth

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

You colums width will be calculated dynamically based on your settings in variables.less. you could set @grid-columns and @grid-gutter-width. The width of a column will be set as a percentage via grid.less in mixins.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 并重新编译 bootstrap.

update Set @grid-gutter-width to 20px;, @container-desktop: 940px;, @container-large-desktop: @container-desktop and recompile bootstrap.

这篇关于Bootstrap 3 - 将桌面的容器宽度设置为 940 像素最大值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！