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

我正在用 Bootstrap 搭建我的第一个网站，并尝试流畅的布局。我已经设置我的容器是流动的，现在内容占用整个页面的宽度，并适应我调整浏览器的大小。

我正在设计的最大宽度是950px。

我已经检查了 variables.less和 responsive.less，以及 Bootstrap 文档; 我不能很好地解决如何实现这一点。

我还尝试在我的 style.css中加入以下内容:

body {
max-width: 950px;
}
193781 次浏览
小开
最佳答案

剪辑

更好的方法是:

  1. 创建自己的. less 文件作为 main. less 文件(如 bootstrap.less)。

  2. 导入所有引导程序。你需要更少的文件。(在这种情况下，您只需要导入所有响应。文件较少，但 responsive-1200px-min.less)

  3. 如果需要修改原始引导程序中的任何内容。文件更少，只需要编写自己的文件。更少地覆盖引导程序。更少的代码。(只要记得把你的。在 @import { /* bootstrap's .less file */ };之后减少代码/文件)。

原创的

我也有同样的问题，我就是这么解决的。

查找媒体查询:

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

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

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

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

小开

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

// Large desktops


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

像这样:

// Large desktops


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

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

我的应用程序的 max-width为1600px。以下是它的工作原理:

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

  2. 在 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 */
}
小开

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

我不想编辑 bootstrap 响应. css，所以我采用了简单的方法:

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

就是这样。它不是最佳的，你会有重复的 css，但它的工作100% 完美！

小开

我不知道这里有没有指出来。.container宽度的设置必须在 Bootstrap 网站上设置。我个人不必编辑或触摸 CSS 文件中的任何东西来调整我的 .container大小，这是1600px。在 Customize 选项卡下，有三个部分负责媒体和网络的响应能力:

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

除了我相信大多数人都会提到的 媒体查询断点，我还把 @container-desktop改成了 (1130px + @grid-gutter-width)，把 @container-large-desktop改成了 (1530px + @grid-gutter-width)。现在，如果我的浏览器放大到 ~ 1600px 和 ~ 1200px，那么 .container就会改变它的宽度。希望能帮上忙。


提交答案