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

76

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

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

我已经检查了variables.less和responsive.less，以及Bootstrap文档；我不能完全弄清楚如何做到这一点。

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

body {
    max-width: 950px;
}

html twitter-bootstrap css

— 欧莉·F
source

您的CSS规则有效，这有什么问题？演示

— Andres Ilich 2012年

好。重试。它以前没有起作用，但是可能归结于我与LESS / Espresso / Codekit所遇到的一些问题。我的LESS文件未正确编译。但是，现在可以正常工作了，它body像以前一样向左对齐而不是居中对齐。有什么建议？我试过设置margin到auto了左，右。

— Olly F 2012年

2

@OllyF等待，您希望“容器”的宽度为950px，而不是完整的文档吗？我很困惑，twitters非流体容器的默认宽度为940px，因此它在您的约束之下。

— 安德烈斯·伊利希

我的理解是，最好body有个max-width，以防万一我想在容器外做某事。无论如何，抛开这些，我要处理一个流体容器。当我将容器设置为液体时，它会扩展到整个身体的宽度。这就是为什么我要设置主体的最大宽度。

— Olly F

1

@OllyF在响应式CSS内将此媒体查询修改为您要查找的宽度：@media (min-width: 768px) and (max-width: 979px) { .. }在您的情况下为max-width:950px;。

— 安德烈斯·伊利希

26

编辑

更好的方法是：

创建您自己的less文件作为主要的less文件（例如bootstrap.less）。
导入所需的所有引导程序更少的文件。（在这种情况下，您只需要导入所有响应较少的文件，但responsive-1200px-min.less）
如果您需要修改原始的bootstrapless文件中的任何内容，则只需编写自己的less文件以覆盖bootstrap的less代码。（只记得在后面放置较少的代码/文件@import { /* bootstrap's less file */ };）。

原版的

我也有同样的问题。这就是我解决的方法。

查找媒体查询：

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

去掉它。（我指的是整个事情，而不仅仅是@media (max-width:1200px)）

由于Bootstrap的默认宽度为940px，因此您无需执行任何操作。

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

— 马克西姆
source

6

知道如何在不更改任何引导文件的情况下进行更改吗？例如，有没有办法在包含Bootstrap之后在CSS中修改此行为？

— mdrozdziel 2012年

您可以拥有自己的主less文件，其中包括所有自定义的less文件和引导程序的less文件。您的自定义更少文件可以覆盖引导程序更少文件中的任何规则。

— maxisam 2012年

更好的是，仅覆盖适当的变量而不是实际样式（请参阅bootstrap / variables.less）。

— ebuat3989

176

您不必通过删除@media (max-width:1200px)...来修改引导响应

我的应用具有max-width1600px。这对我来说是这样的：

创建bootstrap-custom.css-尽可能地，我不想覆盖我原来的bootstrap css。
在bootstrap-custom.css内部，通过包含以下代码来覆盖容器流体：

像这样：

/* 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 */
}

— c
source

11

我将.container-fluid更改为.container（我使用的是该类而不是您的类），并将max-width更改为min-width，它起作用了！:)

— gabrielhpugliese

7

当您使用引导元素（如navbar）的宽度仍然在@media（最大宽度：1200像素）下定义时，该方法将不起作用

— digout 2012年

8

这完美无瑕！它模拟了Facebook布局，尤其是导航栏。我认为这应该是公认的答案。

— 大卫·莫拉莱斯

2

最小的麻烦和最大的效果。

— 马特·莱西

2

设置边距：不需要auto（Bootstrap 3不再需要）。

— Jan-Philip Gehrcke博士，2015年

8

在sensitive.less中，您可以注释掉导入sensitive-1200px-min.less的行。

// Large desktops

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

像这样：

// Large desktops

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

— 亨利
source

是的，但是当他导入了较少的文件并且他在应用程序中拥有所有的css文件时，他可以将第一个div放在body标签中，如下所示：<div class =“ container-fluid”>和<div class =“ row -fluid“> ，整个容器将是流体。我认为这是他的计划。我还建议您阅读：脚手架那里提供了一个很好的例子。

— ionutab

1

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

我不想编辑bootstrap-sensitive.css，所以我走了简单的路：

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

而已。这不是最佳选择，您将有重复的CSS，但是100％完美！

— ch
source

1

我不知道这里是否指出了这一点。对于设置.container宽度必须在引导网站上设置。我个人不必编辑或触摸CSS文件中的任何内容即可调整.container1600px的尺寸。在“自定义”选项卡下，有三个部分负责媒体和Web的响应性：

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

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

— 塞尔多
source