使用Bootstrap设置body的最大宽度

Question

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

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

我检查variables.less,并responsive.less和引导文件,我不能完全解决如何做到这一点.我也尝试将以下内容添加到我的style.css:

body {
    max-width: 950px;
}

Answer 1

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

我的应用程序有max-width1600px.这是它对我有用的方式:

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

Answer 2

编辑

更好的方法是

1. 创建自己的较少文件作为主要较少的文件(如bootstrap.less).

2. 导入所需的所有bootstrap文件.(在这种情况下,您只需导入所有响应较少的文件,但响应-1200px-min.less)

3. 如果你需要修改原始bootstrap less文件中的任何内容,你只需要编写自己的更少来覆盖bootstrap的代码.(只需记住在@import {bootstrap的文件少}之后放入较少的代码/文件;).

原版的

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

找到媒体查询.

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

去掉它.(我的意思是整个事情,而不仅仅是responsive-1200px-min.less)

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

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

Answer 3

无响应,你可以注释掉导入responsive-1200px-min.less的行.

// Large desktops

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

像这样:

// Large desktops

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