Question

使用Twitter Bootstrap构建我的第一个站点并尝试使用流畅的布局。我已经将容器设置为流畅的，现在内部的内容占用整个页面宽度并适应调整浏览器的大小。

我正在开发的设计最大宽度为~950px。

我已经检查了variables.less和responsive.less以及Bootstrap文档，我无法弄清楚如何实现这一点。我还尝试将以下内容添加到style.css：

body {
    max-width: 950px;
}

Answer 1

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

来修改bootstrap响应

我的应用程序的max-width为1600px。这是它对我有用的方式：

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

Answer 2

修改

更好的方法是

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

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

如果您需要修改原始bootstrap less文件中的任何内容，您只需编写自己的内容就可以覆盖bootstrap较少的代码。（只需记住在@import {bootstrap的文件少}之后放入较少的代码/文件;）。

<强>原始

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

查找媒体查询。

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

删除它。（我的意思是整个事情，而不仅仅是@media (max-width:1200px)）

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

如果您想拥有自己的最大宽度，只需修改媒体查询中符合所需宽度的css规则。

Answer 3

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

// Large desktops

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

像这样：

// Large desktops

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

Answer 4

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

我不想编辑bootstrap-responsive.css所以我就这么简单了：

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

就是这样。它不是最佳的，你会有重复的CSS，但它100％完美！

Answer 5

我不知道这里是否指出了这一点。必须在Bootstrap网站上设置.container宽度的设置。我个人无需编辑或触摸CSS文件中的任何内容来调整.container大小为1600px。在“自定义”选项卡下，有三个部分负责媒体和Web的响应性：

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

除了我认为大多数人提到的媒体查询断点之外，我还将@container-desktop更改为(1130px + @grid-gutter-width)，将@container-large-desktop更改为{{1} }。现在，如果我的浏览器扩展到~1600px和~1200px，(1530px + @grid-gutter-width)会改变其宽度。希望它可以提供帮助。

使用Bootstrap设置body的最大宽度

5 个答案: