Html 使用 Bootstrap 设置主体的最大宽度

Setting max width for body using Bootstrap

提问by Olly F

I'm building my first site with Twitter Bootstrap and experimenting with fluid layouts. I've set my container to be fluid, now the content inside takes up the full page width and adapts as I resize the browser.

我正在使用 Twitter Bootstrap 构建我的第一个网站并尝试使用流畅的布局。我已经将我的容器设置为流动的，现在里面的内容占据了整个页面的宽度并在我调整浏览器大小时进行调整。

The design I'm working on was created for a maximum width of ~950px.

我正在处理的设计的最大宽度为 ~950 像素。

I've checked variables.lessand responsive.less, and the Bootstrap documentation; I can't quite work out how to make this happen.

我已经检查了variables.lessandresponsive.less和 Bootstrap 文档；我无法完全弄清楚如何实现这一点。

I also tried adding the following to my style.css:

我还尝试将以下内容添加到我的style.css：

body {
    max-width: 950px;
}

采纳答案by maxisam

Edit

编辑

A better way to do this is:

一个更好的方法是：

1. Create your own less file as a main less file ( like bootstrap.less ).

2. Import all bootstrap less files you need. (in this case, you just need to Import all responsive less files but responsive-1200px-min.less)

3. If you need to modify anything in original bootstrap less file, you just need to write your own less to overwrite bootstrap's less code. (Just remember to put your less code/file after @import { /* bootstrap's less file */ };).

1. 创建您自己的 less 文件作为主要的 less 文件（如 bootstrap.less ）。

2. 导入您需要的所有 bootstrap less 文件。（在这种情况下，您只需要导入所有响应较少的文件，但是responsive-1200px-min.less）

3. 如果您需要修改原始 bootstrap less 文件中的任何内容，您只需要编写自己的 less 来覆盖 bootstrap 的 less 代码。（请记住将您的 less 代码/文件放在 之后@import { /* bootstrap's less file */ };）。

Original

原来的

I have the same problem. This is how I fixed it.

我也有同样的问题。这就是我修复它的方式。

Find the media query:

找到媒体查询：

@media (max-width:1200px) ...

Remove it. (I mean the whole thing , not just @media (max-width:1200px))

去掉它。（我的意思是整件事，不仅仅是@media (max-width:1200px)）

Since the default width of Bootstrap is 940px, you don't need to do anything.

由于 Bootstrap 的默认宽度是 940px，所以你不需要做任何事情。

If you want to have your own max-width, just modify the css rule in the media query that matches your desired width.

如果您想拥有自己的max-width，只需修改媒体查询中与您所需宽度相匹配的 css 规则。

回答by jcg

You don't have to modify bootstrap-responsive by removing @media (max-width:1200px)...

您不必通过删除@media (max-width:1200px)...

My application has a max-widthof 1600px. Here's how it worked for me:

我的应用程序max-width的像素为 1600 像素。这是它对我的工作方式：

1. Create bootstrap-custom.css - As much as possible, I don't want to override my original bootstrap css.

2. Inside bootstrap-custom.css, override the container-fluid by including this code:

1. 创建 bootstrap-custom.css - 尽可能地，我不想覆盖我原来的 bootstrap css。

2. 在 bootstrap-custom.css 中，通过包含以下代码来覆盖容器流体：

Like this:

像这样：

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

回答by Henry

In responsive.less, you can comment out the line that imports responsive-1200px-min.less.

在responsive.less 中，你可以注释掉导入responsive-1200px-min.less 的那一行。

// Large desktops

@import "responsive-1200px-min.less";

Like so:

像这样：

// Large desktops

// @import "responsive-1200px-min.less";

回答by chech

Unfortunately none of the above solved the problem for me.

不幸的是，以上都没有为我解决问题。

I didn't want to edit the bootstrap-responsive.css so I went the easy way:

我不想编辑 bootstrap-responsive.css 所以我采用了简单的方法：

1. Create a css with priority over bootstrap-responsive.css
2. Copy all the content of the @media (min-width: 768px) and (max-width: 979px)(line 461 with latest bootstrap version 2.3.1 as of today)
3. Paste it in your high priority css
4. In your css, put @media (min-width: 979px)in the place where it said @media (min-width: 768px) and (max-width: 979px)before. This sets the from 768 to 979 style to everything above 768.

1. 创建一个优先于 bootstrap-responsive.css 的 css
2. 复制@media (min-width: 768px) and (max-width: 979px)（截至今天的最新引导程序版本 2.3.1 的第 461 行）的所有内容
3. 将其粘贴到您的高优先级 css 中
4. 在你的css中，放在之前@media (min-width: 979px)说的地方@media (min-width: 768px) and (max-width: 979px)。这会将从 768 到 979 的样式设置为 768 以上的所有样式。

That's it. It's not optimal, you will have duplicated css, but it works 100% perfect!

就是这样。这不是最佳的，您将复制 css，但它 100% 完美！

回答by Celdor

I don't know if this was pointed out here. The settings for .containerwidth have to be set on the Bootstrap website. I personally did not have to edit or touch anything within CSS files to tune my .containersize which is 1600px. Under Customize tab, there are three sections responsible for media and the responsiveness of the web:

我不知道这里是否指出了这一点。对于设置.container宽度必须在引导网站上设置。我个人不必编辑或触摸 CSS 文件中的任何内容来调整我的.container1600 像素大小。在自定义选项卡下，有三个部分负责媒体和网络的响应能力：

• Media queries breakpoints
• Grid system
• Container sizes

• 媒体查询断点
• 网格系统
• 容器尺寸

Besides Media queries breakpoints, which I believe most people refer to, I've also changed @container-desktopto (1130px + @grid-gutter-width)and @container-large-desktopto (1530px + @grid-gutter-width). Now, the .containerchanges its width if my browser is scaled up to ~1600px and ~1200px. Hope it can help.

除了媒体查询断点，我相信大多数人是指，我也改@container-desktop到(1130px + @grid-gutter-width)和@container-large-desktop到(1530px + @grid-gutter-width)。现在，.container如果我的浏览器放大到 ~1600px 和 ~1200px ，它的宽度会发生变化。希望它能有所帮助。