twitter-bootstrap 如何为 1170px 宽度使用 bootstrap 固定宽度布局?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16250409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:00:03  来源:igfitidea点击:

how to use bootstrap fixed width layout for 1170px width?

twitter-bootstrap

提问by aslamdoctor

I am creating a Bootstrap Template which is Non-responsive. So the width of the Non-responsive design in Bootstrap is 940px. But the issue here is, I am requested to use the layout width for 1170px only. So I would like to know if there is any provision in Bootstrap for making Non-responsive layouts with 1170px width?

我正在创建一个无响应的 Bootstrap 模板。所以 Bootstrap 中非响应式设计的宽度是 940px。但这里的问题是,我被要求仅使用 1170 像素的布局宽度。所以我想知道 Bootstrap 中是否有任何规定可以制作宽度为 1170px 的无响应布局?

回答by Zim

It looks like the older versions of Bootstrap did use 1170px, but it was changed to 940px (Why is the Twitter Bootstrap "fixed" layout NOT fixed?). If you want to use the latest (2.3.1) the best thing to do would be to override .container in your CSS...

看起来旧版本的 Bootstrap 确实使用了 1170px,但它已更改为 940px(为什么 Twitter Bootstrap “固定”布局未固定?)。如果你想使用最新的 (2.3.1) 最好的办法是在你的 CSS 中覆盖 .container ...

.container {
    width:1170px;
}

Example: http://www.bootply.com/60156

示例:http: //www.bootply.com/60156

回答by Pigueiras

You can customize the grid column width and the grid gutter width in the page of Customize Twitter Bootstrap. You need to increase the width of:

您可以在自定义 Twitter Bootstrap页面中自定义网格列宽和网格间距宽度。您需要增加以下宽度:

  • @gridColumnWidth
  • @gridGutterWidth
  • @gridColumnWidth
  • @gridGutterWidth

For example, if you put a @gridGutterWidthof 30px and @gridColumnWidthof 70px you will achieve that total width, without breaking the bootstrap grid.

例如,如果您放置@gridGutterWidth30px 和@gridColumnWidth70px 的a ,您将获得该总宽度,而不会破坏引导网格。

EDIT: Also, if you are using LESS o SASS modify that two variables to accomplish that.

编辑:此外,如果您使用的是 LESS o SASS,请修改这两个变量以实现该目的。